快捷導(dǎo)航

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

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

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

在開發(fā)后臺項(xiàng)目的時(shí)候產(chǎn)品那邊提出了這個(gè)一個(gè)需求：用戶點(diǎn)擊“選擇模板”的時(shí)候會彈出一個(gè)新窗口，在新窗口選擇模板點(diǎn)擊確定后，會關(guān)閉當(dāng)前的新窗口，并且原來的那個(gè)窗口自動(dòng)顯示用戶在新窗口的選擇項(xiàng)。
這樣會涉及到一個(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)以上方案全都不行，且都會報(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;屬性的話，并不會觸發(fā)input的獲取焦點(diǎn)的事件函數(shù)。

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

您可能感興趣的文章: