大家在做項目的時候，肯定會和我一樣，碰到各種各樣的問題，然后熟練的打開搜索引擎，輸入些關鍵字，開始解決問題。最近在做一個效果，中間就碰到了各種問題，接下來我把解決這個問題的過程發出來分享下，也算是我的一個小心得。
要做的效果其實很簡單，就是在做支付的時候，出現一個彈出層，然后跳到一張新頁面，類似於下面兩張圖片的效果：
| 頁面一 | 頁面二 |
 |
這里面就是兩個技術點，一個是彈出層的實現，另外一個就是通過腳本彈出一個新頁面。出現彈出層這個很好解決，我使用了一個方便的插件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 = 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 = json.data.url;
// }
// viewUtil.setError(json.msg);
// };
//_model.post($(e.target), {cash:cash, ctype:ctype, type:'cashin'}, fn);
頁面效果與那些后台代碼不同，js、css、html等都暴露在外面，隨時能夠查看，想做效果，而且看到了網上的實踐，完全可以查看相關代碼，然后根據這些代碼整合一下，省時省力，做前端得有點copy的能力。在解決這個問題的時候，我也是一點一點的分析，雖然過程很波折，但是在排查的過程中還是有很多體會，網上看到的解決方法不一定試用你的代碼，根據這些方法從各個角度分析，總歸會找到些線索，解決你現在的問題。
這個demo是需要放到php的apache下面的htdocs執行文件中，才能看到相關效果，不然會出現攔截的，直接解壓，將pop文件夾放到htdocs中就可以了，如果改動文件夾的名字就需要在config.js的配置文件中修改domain
demo下載：