JS关闭子窗口并且刷新上一个窗口的实现示例
在开发后台项目的时候产品那边提出了这个一个需求：用户点击“选择模板”的时候会弹出一个新窗口，在新窗口选择模板点击确定后，会关闭当前的新窗口，并且原来的那个窗口自动显示用户在新窗口的选择项。
这样会涉及到一个技术点，就是怎么通过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关闭子窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于JavaScript中变量提升机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JS+HTML实现的圆形可点击区域,结合实例形式分析了javascript结合HTML元素属性实现一个圆形的可点击区域相关操作技巧,需要的朋友可以参考下2018-08-08
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
这篇文章主要介绍了javascript另类方法实现htmlencode()与htmldecode()函数,结合实例形式分析了javascript字符编码与解码操作的相关技巧,需要的朋友可以参考下2016-11-11
Javascript中的every()与some()的区别和应用小结
every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true，只要有一个不满足就返回false，这篇文章主要介绍了Javascript中的every()与some()的区别和应用,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Javascript如何理解全国甲卷高考作文,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
本文介绍了webpack实现热加载自动刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。2010-05-05
本文主要介绍了json数据处理及数据绑定的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了Bootstrap布局组件，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论