首页 > 代码库 > 一次解决页面特效问题的排查记录

一次解决页面特效问题的排查记录

大家在做项目的时候,肯定会和我一样,碰到各种各样的问题,然后熟练的打开搜索引擎,输入些关键字,开始解决问题。最近在做一个效果,中间就碰到了各种问题,接下来我把解决这个问题的过程发出来分享下,也算是我的一个小心得。

要做的效果其实很简单,就是在做支付的时候,出现一个弹出层,然后跳到一张新页面,类似于下面两张图片的效果:

页面一页面二

 这里面就是两个技术点,一个是弹出层的实现,另外一个就是通过脚本弹出一个新页面。出现弹出层这个很好解决,我使用了一个方便的插件artDialog。第二个问题弹出一个新页面,花了点时间,后面用的实现技术是非常简单的,但中间就是发生了很多波折。心情也像过山车一样跌宕起伏.......

这个效果,我本来实现的方式是发送一个ajax请求,然后返回请求,最后在回调函数中跳转新页面和弹出提示层。

 

一、使用location.href实现

这是我最先想到的,然后自己YY了一下,给location加了个target属性,以为这样就能弹出新页面了,实在太无知啦,毫无效果,还是在当前页面跳转。这里就暴露了我解决新问题,总是喜欢从自己用过的技术着手,总是想把那些技术嫁接过来,拼上去,有点碰运气的感觉。发现失败了,就立刻打开搜索引擎,输入最直接的关键字。

 

二、搜索JS弹出新窗口

输入这个最直接的关键字,搜索引擎也没让我失望,一下子出现了好多的相关资料,我一般比较喜欢打开个人博客,个人博客的排版很整齐,像那个脚本之家的排版实在是乱。

有多个解决方案,我选了一个大家说的最多的方法,使用window.open(),这个的确很简单,只要把url地址作为参数放进去后就行,但是用了浏览器会阻止这个页面弹出,如下图:

 这个东西如果给用户看的话,一定会引起恐慌啦,一般只有弹出垃圾页面或广告等信息的时候会出现,用户肯定会习惯性的认为你这里有蹊跷。接下来我就根据window.open来搜索了,想从这里找到个突破口。

 

三、搜索js window.open 不拦截

方法一:先弹出一个空页面,然后再用location.href,实践证明不可行。

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

方法二:利用浏览器的冒泡事件,这个方法高大上,但是我水平太菜了,不会用,后面还查到了一个差不多的方法,里面稍微有点修改,本来以为那个方法可以解除我的烦恼,但最终还是失败了,在执行到window.open的时候还是出现了阻止

clickOpenWin: function(f){    var dataKey = "clickOpenWin.dataKey"    var me = $(this);    var A = me.data(dataKey);    var returnData = http://www.mamicode.com/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);    });

经过这一连串的失败,我就想到一个问题,为什么页面上面用鼠标点击弹出新页面不会阻止,而用脚本弹出就会被限制呢?

 

四、搜索js模拟鼠标点击

想到动态添加一个a标签,用a标签来模拟打开新页面,柳暗花明又一村的感觉,而且实现方式也很简单

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

但是还是出现了很不受欢迎的拦截提示,作死的节奏。

继续搜索,发现有人用纯JS的语法来写,这个时候马上就怀疑自己是不是因为用了jQuery与动态生成的原因,有时候就是会因为一个小细节导致错误的,我马上就急冲冲的修改代码,在页面中加上a标签,然后用脚本click一下,依然是那个问题,唉

<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>

 

五、想利用弹出层来做跳转

 这个我后面想了下,的确能做到在弹出层里面跳转,但是平时看到的那些效果完全感觉不出来是用弹出层的,更不会是用iframe来做的效果,否决了这个方案

 

六、搜索jquery 广告强制弹出窗口

平时浏览网站的时候,有些流氓页面还是会被弹出来,莫非有什么强力方法可以做到吗?

顺着这个思路去搜索,查到了一个相关代码,如下:

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); }

从外形看,这个代码挺高大上的,看了下后,发现其实还是在用模拟a标签以及window.open的方法,一下子就感觉希望不大,还是抱着试试的态度操作了下,果不出所料

中图还看到一个用form方法弹出的方式:

<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>

这个方法倒挺像那么一回事的,有感觉,有预感能行,然后马上实验下,额,还是万恶的弹出层。

一直折腾到了吃晚饭的时候,吃饭的时候就在想,其他网站到底是什么高级的方法来实现的呢!!!突然想到可以去扣一下有这个效果的网站脚本,看看是怎么实现的。我这种扣脚本的事经常干,而且非常有效,经常会有很多意外收获,这次也不例外。

 

七、从实现这个效果的网站上扣脚本代码

用firebug查看html代码,然后一个一个查看脚本,网站的脚本没有压缩,非常幸运,后面找到了相关方法。非常意外,不是啥高级的方法,其实就是用form表单提交,target="_blank",尼玛,这不是和我刚刚的代码一样呀,为嘛他能顺利弹出,但是我这里死活就是拦截,本来以为是网站做了什么设置,YY了一下,想不到有啥设置,然后看了下html与js代码,终于发现了不同。

原因就是我打开新窗口的代码是放在ajax的回调函数中,而那个网站的代码没有写在回调函数中。找到了问题根源,就能迎刃而解啦,终于出现了我想要的效果

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

 

页面效果与那些后台代码不同,js、css、html等都暴露在外面,随时能够查看,想做效果,而且看到了网上的实践,完全可以查看相关代码,然后根据这些代码整合一下,省时省力,做前端得有点copy的能力。在解决这个问题的时候,我也是一点一点的分析,虽然过程很波折,但是在排查的过程中还是有很多体会,网上看到的解决方法不一定试用你的代码,根据这些方法从各个角度分析,总归会找到些线索,解决你现在的问题。

 

一次解决页面特效问题的排查记录