1 問題描述
點擊button按鈕,提交頁面的form表單,后台執行完畢后返回參數,前台頁面需要該參數實現跳轉,如何實現保留該原來的頁面,並在瀏覽器選項卡新建一個頁面,且不被瀏覽器攔截?
2 方法及問題
1)window.open()
在ajax的回調函數中調用window.open()實現會被瀏覽器攔截。
2)js模擬點擊按鈕事件
代碼如下:
<html lang="utf-8">
<head>
<meta http-equiv="Content-type" Content ="text/html;"charset = "utf-8" >
</head>
<body>
<a id="alink" href="test" target="_blank" style="display: none"><span id="spanlink">test</span></a>
<input type="hidden" id="hdn_val" value="#">
<button type="button" onclick="submit()">打開新頁面</button>
<script>
function new_window() {
while(1){
var o_a = document.getElementById('hdn_val');
var val=o_a.value;
if(val!="#"){
var a = document.getElementById('alink');
a.href=val;
var a = document.getElementById('spanlink');
a.click();
break;
}
}
}
function ajax_submit_cb(data){
var a = document.getElementById('hdn_val');
a.value=data;
}
function ajax_submit(){
//模擬ajax有延時,與實際仍有差別,瀏覽器會檢測回調對象,判斷是否是鼠標實際點擊的按鈕
var url='http://www.cnblogs.com/xiaopanlyu/';
setTimeout(ajax_submit_cb(url),3000);
}
function submit(){
ajax_submit();//該函數執行業務邏輯
new_window();
}
</script>
</body>
3 總結
在實際ajax中執行時,必須保持點擊按鈕的時候 執行新頁面的函數new_window 與 ajax函數是同步的,不能將new_window 放在ajax的結果中執行,否則新頁面窗口就會被瀏覽器攔截。
demo:https://files.cnblogs.com/files/xiaopanlyu/test_new_window.zip