在開發後臺專案的時候產品那邊提出了這個一個需求：使用者點選“選擇模板”的時候會彈出一個新視窗，在新視窗選擇模板點選確定後，會關閉當前的新視窗，並且原來的那個視窗自動顯示使用者在新視窗的選擇項。
這樣會涉及到一個技術點，就是怎麼通過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關閉子視窗內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！