源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 8474|回复: 0

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

[复制链接]

1175

主题

1564

帖子

9020

金币

超级版主

Rank: 8Rank: 8

积分
19728
发表于 2022-6-14 22:58:34 | 显示全部楼层 |阅读模式
这篇文章主要介绍了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关闭子窗口内容请搜索锦尚中国以前的文章或继续浏览下面的相关文章希望大家以后多多支持锦尚中国!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-10-16 15:03 , Processed in 0.136997 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明