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

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

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

方案一：通過在子窗口的關(guān)閉函數(shù)中加入以下代碼，即可實(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)以上方案全都不行，且都會(huì)報(bào)以下這種錯(cuò)誤：

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

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

父界面的代碼

<span onclick="openNewWindow()">點(diǎn)擊打開新窗口</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("獲取到了焦點(diǎn)，可以在這里寫邏輯代碼")
  }
  console.log("頁面重新刷新")
</script>

子界面的代碼

<span onclick="closeCurrentWindow()">點(diǎn)擊關(guān)閉當(dāng)前窗口，并且更新上一個(gè)窗口的信息</span>
<script>
  function closeCurrentWindow() {
    console.log(window)
    opener.location.reload();
    window.close()
  }
</script>

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

注意：

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

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