彈窗

window.open( ) , 它會(huì)打開一個(gè)指定URL 的新窗口。 瀏覽器會(huì)打開一個(gè)新的選項(xiàng)卡URL，而不是獨(dú)立的窗口。

window.open (URL, name, features, replace)

• URL： 打開指定鏈接， 如果為空的話，則打開一個(gè)新窗口顯示空白文檔
• name: 新窗口的名稱。
• params: 新窗口的配置字符串。它包括設(shè)置，用逗號分隔。參數(shù)之間不能有空格，例如：width=200,height=100。

params 的設(shè)置項(xiàng)：

• 位置:

• • left/top（數(shù)字）—— 屏幕上窗口的左上角的坐標(biāo)。這有一個(gè)限制：不能將新窗口置于屏幕外（offscreen）。
  • width/height（數(shù)字）—— 新窗口的寬度和高度。寬度/高度的最小值是有限制的，因此不可能創(chuàng)建一個(gè)不可見的窗口。

• 窗口功能：

• • menubar（yes/no）—— 顯示或隱藏新窗口的瀏覽器菜單。
  • toolbar（yes/no）—— 顯示或隱藏新窗口的瀏覽器導(dǎo)航欄（后退，前進(jìn)，重新加載等）。
  • location（yes/no）—— 顯示或隱藏新窗口的 URL 字段。Firefox 和 IE 瀏覽器不允許默認(rèn)隱藏它。
  • status（yes/no）—— 顯示或隱藏狀態(tài)欄。同樣，大多數(shù)瀏覽器都強(qiáng)制顯示它。
  • resizable（yes/no）—— 允許禁用新窗口大小調(diào)整。不建議使用。
  • scrollbars（yes/no）—— 允許禁用新窗口的滾動(dòng)條。不建議使用。

為什么要使用彈窗？

• 彈窗是一個(gè)獨(dú)立的窗口，具有自己的獨(dú)立 JavaScript 環(huán)境。因此，使用彈窗打開一個(gè)不信任的第三方網(wǎng)站是安全的。
• 打開彈窗非常容易
• 彈窗可以導(dǎo)航（修改 URL），并將消息發(fā)送到 opener 窗口（譯注：即打開彈窗的窗口）

打開一個(gè)小窗口

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;
window.open('/', 'test', params);

彈窗訪問窗口

window 對象擁有一個(gè) opener 屬性，引用打開它的原始對象。opener 只在彈出窗口的最外層 window 對象（top）中定義，而且指向調(diào)用 window.open() 方法的窗口或框架。

window.opener.document.write ("<h1>給原有窗口添加內(nèi)容</h1>");  //在原窗口中輸出提示信息

窗口之間的連接是雙向的：主窗口和彈窗之間相互引用。

關(guān)閉窗口

關(guān)閉窗口： window.close()

檢測窗口是否關(guān)閉狀態(tài)： window.close true 關(guān)閉狀態(tài) false 開啟狀態(tài)

window.close()

彈窗聚焦/失焦

window.focus()
window.blur()

小結(jié)

彈窗在實(shí)際使用的場景比較少，通常在 進(jìn)行 OAuth 授權(quán) 登錄 使用。有比彈窗更好的選擇，在頁面中彈窗Dialog 或者 iframe 。

以上就是JavaScript Window.open 彈窗使用詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Window.open 彈窗的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論