JS关闭子窗口并且刷新上一个窗口的实现示例

编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了JS关闭子窗口并且刷新上一个窗口的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

在开发后台项目的时候产品那边提出了这个一个需求:用户点击“选择模板”的时候会弹出一个新窗口,在新窗口选择模板点击确定后,会关闭当前的新窗口,并且原来的那个窗口自动显示用户在新窗口的选择项。
这样会涉及到一个技术点,就是怎么通过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.

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

父界面的代码

<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关闭子窗口内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板