解決window.open() 詳解《彈出框瀏覽器攔截阻止,和彈出狂隱藏地址欄》 JS頁面跳轉

時間 2019-11-13

標籤解決 window.open window open 詳解彈出瀏覽器攔截阻止隱藏地址頁面欄目 Windows 简体版

原文原文鏈接

最近在作支付寶在線支付，場景：在商務網站選擇產品後點擊確認購買，把數據傳遞到後臺保存數據庫，而後直接執行window.open(URL) 結果發先跳轉頁面會被瀏覽器攔截阻止打開窗口！通過研究發現內有蹊蹺……下面爲測試頁面相信你一測試就會明白一切！

<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="#" id="a">AAAAA</a>
<input type="button" id="btn" value="Open Baidu" onclick="openwin();" />
<script>
document.getElementById('a').onclick = function () {
    window.open('http://segmentfault.com');
    return false;
};
function openwin() {
	var url = "http://www.baidu.com";
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", "openwin");
    document.body.appendChild(a);
    a.click();
}
// 自動執行打開
setTimeout(function () {
  window.open('http://segmentfault.com');
}, 1000);
</script>
</body>
</html>

總結：一句話觸發打開動做的是用戶發起的瀏覽器不會阻止，若是觸發動做是自動執行的則瀏覽器會阻止打開。（進入ajax是自動的可是ajax執行完）會認爲你是彈廣告xxxxxxx！想不被阻止就想辦法讓動做換成用戶本身發起的……

最近碰到一個關於瀏覽器彈出新窗口的問題，像京東商城裏面聯繫客服那個點擊按鈕以後的效果同樣，因而，我就去了解了如何實現這個方法，其實無非就是window.open的操做方法而已，整理了一下，供你們參考。但原本仍是建議，能用彈出層，就不要用彈出新窗口這個方法，由於，兼容性上仍是存在必定問題的。 javascript

設置	值	說明
fullscreen	yes或者no	表示瀏覽器窗口是否最大化。僅限IE
height	數值	表示新窗口的高度。不能小於100
width	數值	表示新窗口的寬度。不能小於100
left	數值	表示新窗口的左座標。不能是負值
top	數值	表示新窗口的上座標。不能是負值
location	yes或者no	表示是否在瀏覽器窗口中顯示地址欄。不一樣瀏覽器的默認值不一樣。若是設置爲no，地址欄可能會隱藏（IE），也可能會被禁用。
menubar	yes或者no	表示是否在瀏覽器窗口中顯示菜單欄。默認值爲no
resizable	yes或者no	表示是否能夠經過拖動瀏覽器窗口的邊框改變其大小。默認值爲no
scrollbars	yes或者no	表示若是內容在視口中顯示不下，是否容許滾動。默認值爲no
status	yes或者no	表示是否在瀏覽器窗口中顯示狀態欄。默認值爲no
toolbar	yes或者no	表示是否在瀏覽器窗口中顯示工具欄。默認值爲no

基本語法：

window.open(pageURL,name,parameters)
其中：
pageURL 爲子窗口路徑
name 爲子窗口句柄
parameters 爲窗口參數(各參數用逗號分隔) html

示例：

<script language="javascript">

</ script >

腳本運行後，http://www.webcjs.com將在新窗體newwindow中打開，高爲500，寬爲800，距屏頂0像素，屏左0像素，無工具條，無菜單條，無滾動條，不可調整大小，無地址欄，無狀態欄。請對照下面的窗口特徵。 java

窗口特徵（Window Features）

設置值說明

fullscreen yes或者no 表示瀏覽器窗口是否最大化。僅限IE

height 數值表示新窗口的高度。不能小於100

width 數值表示新窗口的寬度。不能小於100

left 數值表示新窗口的左座標。不能是負值

top 數值表示新窗口的上座標。不能是負值

location yes或者no 表示是否在瀏覽器窗口中顯示地址欄。不一樣瀏覽器的默認值不一樣。若是設置爲no，地址欄可能會隱藏（IE），也可能會被禁用。

menubar yes或者no 表示是否在瀏覽器窗口中顯示菜單欄。默認值爲no

resizable yes或者no 表示是否能夠經過拖動瀏覽器窗口的邊框改變其大小。默認值爲no

scrollbars yes或者no 表示若是內容在視口中顯示不下，是否容許滾動。默認值爲no

status yes或者no 表示是否在瀏覽器窗口中顯示狀態欄。默認值爲no

toolbar yes或者no 表示是否在瀏覽器窗口中顯示工具欄。默認值爲no

關於窗口特徵的幾點說明

1）若是 location 設置參數爲no，在IE下能夠隱藏地址欄，但在FF，谷歌下面是隱藏不了的。

2）遨遊瀏覽器下面彈出新的窗口跟其餘瀏覽器都另類，他均都是全屏顯示，這個真的蛋疼。

moveTo()的用法

moveTo() 方法可把窗口的左上角移動到一個指定的座標。

window.moveTo(x,y) //註明：x,y爲窗口新位置的座標

DEMO：拷貝可直接測試

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script language="javascript"> function openwin() { openWindow=window.open("http://www.webcjs.com", "newwin", "height=500,width=800,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=yes,status=no"); //寫成一行 openWindow.moveTo(500,200); //彈出的窗口的左座標爲500，上座標爲500 } </script> </head> <body> <a href="#" onclick="openwin()">打開一個窗口</a> <input type="button" onclick="openwin()" value="打開窗口"> </body> </html>

幾中經常使用的JS頁面跳轉 web

第二種：
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>

第三種：
<script language="javascript">
window.navigate("top.jsp");
</script>

第四種：
<script language="JavaScript">
self.location='top.htm';
</script>

第五種：
<script language="javascript">
alert("非法訪問！");
top.location='xx.jsp';
</script>

ajax