One troubleshooting record for page special effects

When you are working on a project, you will certainly encounter various problems like me. Then, you can skillfully open the search engine and enter some keywords to solve the problem. Recently, I have encountered various problems in the middle of my career. Next I will share the process of solving this problem, so I am very careful.

The effect is actually very simple, that is, when you make a payment, there is a pop-up layer, and then jump to a new page, similar to the effect of the following two images:

Page 1	Page 2

There are two technical points, one is the implementation of the pop-up layer, and the other is to pop up a new page through the script. The pop-up layer is a good solution. I used a convenient plug-in artdialog. The second problem is a new page popped up. It took some time. The subsequent implementation technology was very simple, but there were a lot of twists and turns in the middle. The mood is also ups and downs like a roller coaster .......

This effect is implemented by sending an Ajax request, returning the request, and finally redirecting to the new page and the prompt layer in the callback function.

 

I. Implemented Using location. href

This was the first thing I thought of. Then I YY it myself and added a target attribute to location, so that a new page could pop up. It was so ignorant and ineffective, or jump to the current page. This exposes my new problem. I always like to start with the technologies I have used, and I always want to graft those technologies and put them together. I feel a little luck. If a failure occurs, open the search engine immediately and enter the most direct keyword.

 

2. Search for a New JS window

When I enter this most direct keyword, the search engine did not disappoint me, and a lot of related information suddenly appeared. I generally prefer to open my blog, and the layout of my blog is neat, the layout of a house like that is really messy.

There are multiple solutions. I chose one of the most talked-about methods and used window. open (), this is indeed very simple, as long as the URL address is put as a parameter, but with the browser will block this page, such:

If you show it to users, it will surely cause panic. Generally, it will only appear when information such as spam pages or advertisements pop up. Users will surely habitually think you have something wrong here. Next, I searched by window. Open and wanted to find a breakthrough here.

 

3. Search JS window. Open without blocking

Method 1: an empty page is displayed, and then location. href is used. It turns out that it is not feasible.

var d=window.open();d.location = ‘http://www.cnblogs.com/strick‘;

Method 2, I thought that method could relieve my troubles, but it still failed. when open is enabled, blocking still occurs.

clickOpenWin: function(f){    var dataKey = "clickOpenWin.dataKey"    var me = $(this);    var A = me.data(dataKey);    var returnData = null;    if(!A){        A = $("");        me.data(dataKey, A);        A.click(function(e){            if(returnData){                A.attr("href", returnData);            }else {                A.before(me);                e.stop();            }        });    }    me.mouseover(function(){$(this).before(A).appendTo(A);});    me.mouseout(function(){A.before($(this));});    me.click(function(){        A.attr("href", "#|");        returnData = f.apply(this, arguments);    });

After these series of failures, I came up with a question: why is it not blocked to click a new page on the page, but it is limited to use a script to pop up the page?

 

4. Search for JS simulated mouse clicks

I want to dynamically Add a tag a and use the tag a to simulate opening a new page. The implementation method is also very simple.

var openLink = $("a");openLink.attr(‘href‘, ‘http://www.cnblogs.com/strick/‘);openLink.attr(‘target‘, ‘_blank‘);openLink[0].click();

However, there is still a very undesirable interception prompt, making the pace of death.

I continued to search and found that someone was writing it using pure JS syntax. At this time, I immediately wondered if I was using jquery and dynamic generation, sometimes the error is caused by a small detail. I immediately rushed to modify the code, add the tag to the page, and click it using the script. This is still the problem.

<a target="_blank" href="http://www.cnblogs.com/strick" id="myLink"></a><script language="text/javascript">function AutoClick(){    var myLink = document.getElementById("myLink");    myLink.click();}</script>

 

5. Use the pop-up layer to redirect

After thinking about this, I can jump to the pop-up layer. However, what I usually see is that the pop-up layer does not work, it won't be the result of using IFRAME, and this scheme is rejected.

 

6. Search for a jquery advertisement forced pop-up window

When browsing a website, some rogue pages will still pop up. Is there any powerful way to do this?

Search for the Code following this idea, as shown in the following code:

function windowOpen(){     var a = document.createElement("a");     a.setAttribute("href", url);     if(target == null){         target = ‘‘;     }     a.setAttribute("target", target);     document.body.appendChild(a);     if(a.click){         a.click();     }else{         try{             var evt = document.createEvent(‘Event‘);             a.initEvent(‘click‘, true, true);             a.dispatchEvent(evt);         }catch(e){             window.open(url);         }     }     document.body.removeChild(a); }

In terms of appearance, this code is very big. After reading it, I found that I still use the simulated a tag and window. the open method seems to have little hope at once, but I still operate it with a try attitude. As expected

The figure below shows a pop-up method using the form method:

<form id="form" action="http://www.cnblogs.com/strick" method="get" target="_blank">  </form><script language="text/javascript">function AutoClick(){    document.getElementById("EmailForm").submit();}</script>

This method is quite similar to one thing. I feel like I have a hunch that I can do it. Then I will try it out immediately, and I will try it out on the pop-up layer.

During dinner, I was thinking about how to implement other advanced methods for other websites !!! I suddenly thought that I could buckle the website script with this effect and see how it was implemented. I often do this kind of script deduction, which is very effective and often has many unexpected gains. This is no exception.

 

7. deduct the script code from the website that achieves this effect

Use firebug to view the HTML code, and then view the script one by one. The script of the website is not compressed, so I am very lucky to find the relevant method later. Unexpectedly, it's not an advanced method. It's actually a form submission, target = "_ blank", Nima. It's not the same as my code, why is it that he can pop up smoothly, but here I live and live is blocking. I thought it was the website's settings, YY, and I couldn't think of any settings, then I read the HTML and JS Code and finally found the difference.

The reason is that the Code for opening a new window is placed in the Ajax callback function, and the code of that website is not written in the callback function. After finding the root cause of the problem, you can solve the problem and finally see the desired effect.

$(‘#open_new‘).submit();dialog.showPayLayer();            // var fn = function(json) {　　// if(_model.isSuccess(json)) {          // dialog.showPayLayer();          //location.href = json.data.url;　　// }　　// viewUtil.setError(json.msg);// };//_model.post($(e.target), {cash:cash, ctype:ctype, type:‘cashin‘}, fn);

 

The page effects are different from those in the background code. JS, CSS, HTML, and so on are all exposed and can be viewed at any time. If you see online practices, you can view the relevant code, then integrate the code to save time and effort, and make front-end copy. When I solve this problem, I also analyzed it at. Although the process was very complex, I still had a lot of experience in the troubleshooting process, the solutions you see on the Internet do not necessarily use your code. Based on these methods, you will find some clues to solve your current problems.

 

One troubleshooting record for page special effects