JS打開新窗口

常用于文件、圖片預(yù)覽，或者加載一個新頁面。

window.open() - 打開新窗口

用法：

window.open(strUrl, strWindowName, [strWindowFeatures]);

• strUrl: 新窗口需要載入的url地址，項(xiàng)目中我們打開的是一個在線文檔。
• strWindowName：新窗口的名字，通過這個名字我們可以獲得新窗口的引用，容易重復(fù)，如果我們希望每次打開新窗口都是一個全新的窗口，可以設(shè)置成關(guān)鍵字 “_blank”。
• strWindowFeatures：新窗口的一些設(shè)置，比如是否顯示菜單欄，是否可以滾動和縮放窗口大小等。

示例：

window.open("https://www.baidu.com", "_blank", "resizable,scrollbars,status");

window.location - 更新當(dāng)前窗口

加載給定URL的內(nèi)容資源到這個Location對象所關(guān)聯(lián)的對象上。

屬性：

window.location.href = strUrl; //

方法：

window.location.assign(strUrl); window.location.replace(strUrl); // 不會保存到瀏覽器會話的歷史 History

a 標(biāo)簽 href 屬性

<a href="strUrl" target="_blank">點(diǎn)擊打開新窗口預(yù)覽</a>

動態(tài) a 標(biāo)簽

<div onclick="openNewWindow()">點(diǎn)擊打開新窗口預(yù)覽</div> function openNewWindow() {const strUrl = "https://www.baidu.com";let a = document.createElement("a");document.body.appendChild(a);a.style = "display: none";a.target = "_blank";a.href = strUrl;a.click();document.body.removeChild(a); }

iOS window.open 無效

可以采用 window.location 和 a 標(biāo)簽 的方式解決。

或者調(diào)整腳本時序，先創(chuàng)建一個空窗口，再加載內(nèi)容，而不是 window.open(strUrl) 同時完成。

var windowReference = window.open();myService.getUrl().then(function(url) {windowReference.location = url; });

安全問題

打開新窗口，可以通過 window.opener 獲取原窗口的引用，利用這個引用，可以修改原窗口的屬性，比如 url，所以解決安全問題就需要把這個引用切斷。

window.open 的方式，如下處理

const newWindow = window.open("https://www.baidu.com"); newWindow.opener = null;

a 標(biāo)簽 的方式需要添加 rel 屬性：

<a href="strUrl" target="_blank" rel="noopener noreferrer">點(diǎn)擊打開新窗口預(yù)覽 </a>

性能問題

除了安全隱患外，還有可能造成性能問題。通過target="_blank"打開的新窗口，跟原來的頁面窗口共用一個進(jìn)程。如果這個新頁面執(zhí)行了一大堆性能不好的 JavaScript 代碼，占用了大量系統(tǒng)資源，那你原來的頁面也會受到池魚之殃。

.END

總結(jié)

以上是生活随笔為你收集整理的JS打开新窗口（window.open() 、href）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。