js控制表單提交,新視窗開啟
今天做網銀支付的時候,需要做到點選支付的時候提交訂單,然後新視窗開啟支付介面。
思路1:window.open(''),這個直接被pass了,因為銀行的服務一般都是需要post資料的。就算是可以用get傳遞引數,window.open會被大部分瀏覽器攔截彈窗;
思路2:ajax成功之後,回撥funciton中操作頁面的一個帶有'_blank'屬性的表單,這個是網上大部分朋友提供的思路,但是已然不行,存在了跨域操作的'_blank'表單被指令碼提交的時候,已然被攔截;
思路3:ajax成功之後, 回撥funciton中操作頁面的一個帶有'_blank'屬性的表單,表單的action指向同域名的一個url,在這個url裡面重新生成一個新的不帶'_blank'的表單,表單action指向需要提交的最終目的地url,表單裡面用js操作一個在當前頁面提交,本來以為這樣可以欺騙到瀏覽器然瀏覽器認為這個'_blank'表單是指向同域名而不被攔截,但是相當遺憾的是,這個辦法也失敗了,帶有'_blank'屬性的表單,就算只指向同域名的url,也會被大部分瀏覽器攔截。
到這個時候,我已經有些無奈,準備和客戶pk只能讓使用者新增信任網站,或者不在新視窗開啟支付介面。
思路4:完全是靈光一現,誤打誤撞。ajax設定同步操作,在ajax執行完成之後,再用js執行帶有'_blank'屬性的表單提交,非常意外的是,居然在所有的瀏覽器都實現了新視窗開啟而不被攔截
js程式碼如下:
var result; $.ajax({ async: false, //就是設定這個最為關鍵的ajax同步 type: 'POST', url: ctx + "/sales/submitBank", data: orderPost, success: function(datas){ result = datas; } }); //同步ajax執行完成 //以下是動態生成表單提交 var str = []; str.push('<form action="postcash" id="gobank" method="get">'); str.push('<input name="acceptId" value="' + datas.acceptId + '" id="postbankacceptId"/>'); str.push('<input name="time" value="' + datas.time + '"/>'); str.push('<input name="key" value="' + datas.key + '"/>'); str.push('<input name="merchantId" value="' + datas.merchantId + '" id="postbankmerchantId"/>'); str.push('</form>'); $("body").append(str.join('')); $("#gobank").attr('target', '_blank'); $("#gobank").submit();
具體為什麼會有這樣的結果,我還沒有研究的出來,也許是執行ajax同步鎖定瀏覽器的時候,讓瀏覽器SB掉了,不過總歸說來,這樣是可以欺騙瀏覽器來達到js新視窗開啟頁面的效果的
如果不需要執行ajax,也可以先執行一個完全沒有作用的ajax來實現這個目的
ps:也許做彈窗廣告的兄弟看到這個,會爽歪歪,不過請考慮下一般使用者的耐受性…………