时间:2021-05-26
在开发后台项目的时候产品那边提出了这个一个需求:用户点击“选择模板”的时候会弹出一个新窗口,在新窗口选择模板点击确定后,会关闭当前的新窗口,并且原来的那个窗口自动显示用户在新窗口的选择项。
这样会涉及到一个技术点,就是怎么通过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关闭子窗口内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考,具体如下:父窗口页面father.html父窗口传递到父窗口的值:子窗口设置的值:子窗口关闭后
此文介绍了如何用window.open方法打开一个子窗口,当我们要关闭主窗口时,这时候所有的子窗口也会跟着关闭。下面有我的实现思路和代码,分享给大家。实现思路:
先说下我的需求:主窗口打开子窗口,主窗口有数据传给打开的子窗口,子窗口关闭时直接返回主窗口。----------------------------------
第一种:JS定时自动关闭窗口第二种:点击链接没有提示的JS关闭窗口关闭窗口第三种:窗口没有提示自动关闭的js代码IE6-7JS关闭窗口不提示的方法方法一:js代
复制代码代码如下://关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("window.close();");//关闭,父窗口和子窗