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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
JS中的回调函数实例浅析
Mar 21 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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下实现折线图效果的代码
2007/04/28 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python实现动态添加属性和方法操作示例
2018/07/25 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Django 解决由save方法引发的错误
2020/05/21 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
英语专业应届生求职信范文
2013/11/15 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
企业员工薪酬方案
2014/06/04 职场文书
作风转变年心得体会
2014/10/22 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
对象析构函数__del__在Python中何时使用
2022/03/22 Python
python中使用redis用法详解
2022/12/24 Redis