溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在開發后臺項目的時候產品那邊提出了這個一個需求：用戶點擊“選擇模板”的時候會彈出一個新窗口，在新窗口選擇模板點擊確定后，會關閉當前的新窗口，并且原來的那個窗口自動顯示用戶在新窗口的選擇項。
這樣會涉及到一個技術點，就是怎么通過JS來實現關閉子窗口并且刷新上一個窗口。
百度了很久，嘗試了以下幾種方案：
方案一：通過在子窗口的關閉函數中加入以下代碼，即可實現父窗口的刷新。
window.opener.location.href = window.opener.location.href;
方案二：也是在子窗口的關閉函數中加入以下代碼：
function closeMeAndReloadParent(){
opener.location.reload();
window.close();
}
以及方案三window.opener.location.reload();
方案四window.opener.reload();等等
結果發現以上方案全都不行，且都會報以下這種錯誤：
scrollbymyself.html:96 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
不知道是我實現方式有問題還是別的未知原因，沒方法，需求在那里，總是需要解決的，經過親身實踐，總結出了下面這種可行方法，雖有明顯缺點，但也總算了解決了需求。
父界面的代碼
<span onclick="openNewWindow()">點擊打開新窗口</span>
<input type="text" class="parent-input">
<script>
function openNewWindow() {
document.querySelector(".parent-input").focus()
window.open("scrollbymyself.html", "new window");
}
document.querySelector(".parent-input").onfocus = function () {
console.log("獲取到了焦點，可以在這里寫邏輯代碼")
}
console.log("頁面重新刷新")
</script>
子界面的代碼
<span onclick="closeCurrentWindow()">點擊關閉當前窗口，并且更新上一個窗口的信息</span>
<script>
function closeCurrentWindow() {
console.log(window)
opener.location.reload();
window.close()
}
</script>
把上面的代碼應該到項目中，即可實現需求，如果不想讓input顯示在界面上，可以添加opacity: 0;樣式屬性。
注意：
添加display: none;屬性的話，并不會觸發input的獲取焦點的事件函數。
到此這篇關于JS關閉子窗口并且刷新上一個窗口的實現示例的文章就介紹到這了,更多相關JS關閉子窗口內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
