快捷導(dǎo)航

JS關(guān)閉子窗口并且刷新上一個窗口的實現(xiàn)示例

更新時間：2020年03月10日 12:03:14 作者：貓吃素

這篇文章主要介紹了JS關(guān)閉子窗口并且刷新上一個窗口的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

在開發(fā)后臺項目的時候產(chǎn)品那邊提出了這個一個需求：用戶點擊“選擇模板”的時候會彈出一個新窗口，在新窗口選擇模板點擊確定后，會關(guān)閉當前的新窗口，并且原來的那個窗口自動顯示用戶在新窗口的選擇項。
這樣會涉及到一個技術(shù)點，就是怎么通過JS來實現(xiàn)關(guān)閉子窗口并且刷新上一個窗口。

百度了很久，嘗試了以下幾種方案：

方案一：通過在子窗口的關(guān)閉函數(shù)中加入以下代碼，即可實現(xiàn)父窗口的刷新。

window.opener.location.href = window.opener.location.href;

方案二：也是在子窗口的關(guān)閉函數(shù)中加入以下代碼：

function closeMeAndReloadParent(){
  opener.location.reload();
  window.close();
}

以及方案三window.opener.location.reload();

方案四window.opener.reload();等等

結(jié)果發(fā)現(xiàn)以上方案全都不行，且都會報以下這種錯誤：

scrollbymyself.html:96 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

不知道是我實現(xiàn)方式有問題還是別的未知原因，沒方法，需求在那里，總是需要解決的，經(jīng)過親身實踐，總結(jié)出了下面這種可行方法，雖有明顯缺點，但也總算了解決了需求。

父界面的代碼

<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()">點擊關(guān)閉當前窗口，并且更新上一個窗口的信息</span>
<script>
  function closeCurrentWindow() {
    console.log(window)
    opener.location.reload();
    window.close()
  }
</script>

把上面的代碼應(yīng)該到項目中，即可實現(xiàn)需求，如果不想讓input顯示在界面上，可以添加opacity: 0;樣式屬性。

注意：

添加display: none;屬性的話，并不會觸發(fā)input的獲取焦點的事件函數(shù)。

到此這篇關(guān)于JS關(guān)閉子窗口并且刷新上一個窗口的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS關(guān)閉子窗口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: