JS关闭子窗口并且刷新上一个窗口的实现示例(非跨域)

欧阳锋

这篇文章主要介绍了JS关闭子窗口并且刷新上一个窗口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

在开发后台项目的时候产品那边提出了这个一个需求：用户点击“选择模板”的时候会弹出一个新窗口，在新窗口选择模板点击确定后，会关闭当前的新窗口，并且原来的那个窗口自动显示用户在新窗口的选择项。

这样会涉及到一个技术点，就是怎么通过JS来实现关闭子窗口并且刷新上一个窗口。

百度了很久，尝试了以下几种方案：

方案一：通过在子窗口的关闭函数中加入以下代码，即可实现父窗口的刷新。

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

复制代码

方案二：也是在子窗口的关闭函数中加入以下代码：

1. function closeMeAndReloadParent(){
   
2.   opener.location.reload();
   
3.   window.close();
   
4. }

复制代码

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

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

结果发现以上方案全都不行，且都会报以下这种错误：

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

复制代码

不知道是我实现方式有问题还是别的未知原因，没方法，需求在那里，总是需要解决的，经过亲身实践，总结出了下面这种可行方法，虽有明显缺点，但也总算了解决了需求。

父界面的代码

1. <span onclick="openNewWindow()">点击打开新窗口</span>
   
2. <input type="text" class="parent-input">
   
3. <script>
   
4.   function openNewWindow() {
   
5.     document.querySelector(".parent-input").focus()
   
6.     window.open("scrollbymyself.html", "new window");
   
7.   }
   
8.   document.querySelector(".parent-input").onfocus = function () {
   
9.     console.log("获取到了焦点，可以在这里写逻辑代码")
   
10.   }
    
11.   console.log("页面重新刷新")
    
12. </script>
    

复制代码

子界面的代码

1. <span onclick="closeCurrentWindow()">点击关闭当前窗口，并且更新上一个窗口的信息</span>
   
2. <script>
   
3.   function closeCurrentWindow() {
   
4.     console.log(window)
   
5.     opener.location.reload();
   
6.     window.close()
   
7.   }
   
8. </script>
   

复制代码

把上面的代码应该到项目中，即可实现需求，如果不想让input显示在界面上，可以添加opacity: 0;样式属性。
注意：
添加display: none;属性的话，并不会触发input的获取焦点的事件函数。

到此这篇关于JS关闭子窗口并且刷新上一个窗口的实现示例的文章就介绍到这了,更多相关JS关闭子窗口内容请搜索锦尚中国以前的文章或继续浏览下面的相关文章希望大家以后多多支持锦尚中国！