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


Posted in Javascript onMarch 10, 2020

在开发后台项目的时候产品那边提出了这个一个需求:用户点击“选择模板”的时候会弹出一个新窗口,在新窗口选择模板点击确定后,会关闭当前的新窗口,并且原来的那个窗口自动显示用户在新窗口的选择项。
这样会涉及到一个技术点,就是怎么通过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 相关文章推荐
页面实时更新时间的JS实例代码
Dec 18 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 #Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 #Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 #Javascript
vue中的使用token的方法示例
Mar 10 #Javascript
You might like
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php实现微信支付之现金红包
2018/05/30 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
基于Cesium绘制抛物弧线
2020/11/18 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android