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关闭子窗口内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js 父窗口控制子窗口的行为-打开，关闭，重定位，回复

    测试的时候,注意当前目录中,有代码中的html文件. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • JS中showModalDialog关闭子窗口刷新主窗口用法详解

    本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法.分享给大家供大家参考,具体如下: 网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一.showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点.除非对话框被关闭,否

  • 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口

    今天在网上看到这篇文章,感觉很少会用到,但毕竟还是有些人需要这样的功能的,否则就不会有这篇文章,这篇文章主要是解决以下问题: 复制代码 代码如下: 1.点击一个可以打开新窗体的链接,如何实现如果窗体已打开,则将焦点转到已打开的窗体,否则打开新窗体.难点:如何判断窗体已打开,及将将打开的窗体Active?   2.如何实现一个主窗体关闭时,将所有 打开的其他相关窗体一起关闭? 实现要点:  1. window.open 会返回新打开窗口的 window 对象.  2. 实现一个模拟的简单 Hash

  • js关闭父窗口时关闭子窗口

    在父窗口写: 复制代码 代码如下: var sonid = window.open ('"+ url2 + "', 'newwindow', 'height=108, width=200, top="+ top + ",left=" + left+ ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, "+ "status=no,titlebar

  • js父窗口关闭时子窗口随之关闭完美解决方案

    最近,遇到一个权限管理的系统.由于权限管理的系统和本来的系统风格不一致,所有新打开一个窗口.问题就来了,admin注销之后,权限管理的窗口没有关闭.其他普通用户登录以后,仍然可以操作权限管理的窗口. 问题简化:admin注销的时候,或者main.html关闭的时候,打开的所有新窗口一起关闭.问题就解决了 直接看代码吧: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h

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

    在开发后台项目的时候产品那边提出了这个一个需求:用户点击"选择模板"的时候会弹出一个新窗口,在新窗口选择模板点击确定后,会关闭当前的新窗口,并且原来的那个窗口自动显示用户在新窗口的选择项. 这样会涉及到一个技术点,就是怎么通过JS来实现关闭子窗口并且刷新上一个窗口. 百度了很久,尝试了以下几种方案: 方案一:通过在子窗口的关闭函数中加入以下代码,即可实现父窗口的刷新. window.opener.location.href = window.opener.location.href;

  • JS+CSS实现下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pullToRefresh/ 项目地址:https://github.com/owenliang/pullToRefresh 实现注意: 利用transition做动画时,优先使用transform:translate取代top,后者动画流畅度存在问题. 各移动浏览器对手势触摸的处理不同(简单罗列如下),但

  • Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法

    Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法

    1.先使用Qt designer设计两个窗口,一个是主窗口,一个是子窗口   其中主窗口是新建-Main Window,子窗口是Dialog窗体. 两个窗口不能是同一类型,否则会崩溃. 并保存为EyeTracking_main.ui和EyeTracking_process.ui(因为我在做眼动追踪,因此窗体命名与此相关,后同),使用UIC工具转成.py文件. 2.写一个驱动函数调用两个窗体 主窗体Eyetracking_main.py from PyQt5 import QtCore, QtGu

  • Flutter 实现下拉刷新上拉加载的示例代码

    本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下: 效果图 使用方法 添加依赖 dependencies: pull_to_refresh: ^1.5.7 导入包 import 'package:pull_to_refresh/pull_to_refresh.dart'; 页面代码样例 class _MyHomePageState extends State<MyHomePage> { List<String> items = ["1&quo

  • js实现div的切换特效上一个下一个

    JS部分: 复制代码 代码如下: //下一个div function next() { var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div'); for (i = 0; i < arr.length-1; i++) { if ((arr[i].style.display == "block"||arr[i].style.display == "") &&

  • js关闭子窗体刷新父窗体实现方法

    复制代码 代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->使用open方式打开的窗体 //使用地址方式 window.opener.location.href='m_Shedule_Main.aspx'; //使用浏览器刷新功能 window.opener.location.reload(); 使用showModalDialog方法 wi

  • 从零开始学习Node.js系列教程三：图片上传和显示方法示例

    从零开始学习Node.js系列教程三：图片上传和显示方法示例

    本文实例讲述了Node.js图片上传和显示方法.分享给大家供大家参考,具体如下: index.js var server = require("./server"); var router = require("./router"); var requestHandlers = require("./requestHandlers"); var handle = {} handle["/"] = requestHandlers

  • layer实现关闭弹出层刷新父界面功能详解

    本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面.开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是: var index = parent.layer.getF

  • js关闭模态窗口刷新父页面或跳转页面

    有两个窗口: A窗口(父),B窗口(模态) A窗口里有一个DATAGRID,一个按钮. 点击按钮时,弹出B窗口(模态).在B窗口中添加数据,提交后,要求B窗口自关闭,然后刷新A窗口(父) 复制代码 代码如下: <script type="text/javascript"> function openSubWin() { window.showModalDialog('b.html', 'newwindow', 'height=500, width=400, top=0, l

随机推荐