脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS关闭子窗口

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

 更新时间：2020年03月10日 12:03:14   作者：猫吃素  
这篇文章主要介绍了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关闭子窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 小程序tab页无法传递参数的方法

    小程序tab页无法传递参数的方法

    这篇文章主要介绍了小程序tab页无法传递参数的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 关于js new Date() 出现NaN 的分析

    关于js new Date() 出现NaN 的分析

    在一个项目中需要进行日期的格式化，后台传到前端是时间的整数（Date.getTime),当后台数据返回字符串时，发现转换日期时在ie下变成NaN，但是真的是这样吗？接下来我们慢慢分析
    2012-10-10
  • js中数组常用方法总结（推荐）

    js中数组常用方法总结（推荐）

    这篇文章主要介绍了js中数组常用方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 为JavaScript添加重载函数的辅助方法

    为JavaScript添加重载函数的辅助方法

    大家都习惯了重载带来的便利。JavaScript有没有重载呢？有人会回答没有，因为函数会被覆盖；有人说有，我们可以模拟重载这 一操作。
    2010-07-07
  • js实现滑动进度条效果

    js实现滑动进度条效果

    这篇文章主要为大家详细介绍了js实现滑动进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript利用正则表达式替换字符串中的内容

    JavaScript利用正则表达式替换字符串中的内容

    本文主要介绍了JavaScript利用正则表达式替换字符串中内容的具体实现方法，并做了简要注释，便于理解。具有一定的参考价值，需要的朋友可以看下
    2016-12-12
  • 微信小程序登录对接Django后端实现JWT方式验证登录详解

    微信小程序登录对接Django后端实现JWT方式验证登录详解

    这篇文章主要介绍了微信小程序登录对接Django后端实现JWT方式验证登录详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • js cavans实现静态滚动弹幕

    js cavans实现静态滚动弹幕

    这篇文章主要为大家详细介绍了js cavans实现静态滚动弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 详解JavaScript对象转原始值

    详解JavaScript对象转原始值

    这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • vscode+gulp轻松开发小程序的完整步骤

    vscode+gulp轻松开发小程序的完整步骤

    这篇文章主要给大家介绍了关于vscode+gulp轻松开发小程序的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论