JavaScript中的子窗口与父窗口的互相调用问题
更新时间：2017年02月08日 09:33:48 作者：孫瑞
本文给大家介绍了JavaScript中的子窗口与父窗口的互相调用问题，非常不错，具有参考借鉴价值，需要的朋友参考下吧
注意：要用open打开才行，如果用openModal打开则会访问不到opener.
open的参数：
window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
参数说明
'page.html' 弹出窗口的文件名; 'newwindow' 弹出的新窗口的名字,非必须,可用空''代替;
height=100 高度; width=400 宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏，yes为显示; menubar，scrollbars 表示菜单栏和滚动栏;
resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息（通常是文件已经打开）,yes为允许;
1、从子窗口中往父窗口传值
如父页面有一个控制的id是choosedProvider，那么这样可以把值传给父页面：
opener.document.getElementById("choosedProvider").value="Tom";
2、从父窗口传值给子窗口，如子窗口中有id为T的控件，此时可以用如下传值：
<script>
var newWindow;
function openWindow(url){
newWindow = window.open(“new.htm”, "", "width=400,height=300 ");
}
function changeChild(){
newWindow.document.getElementById("T").value="我变了";
}
</script>
3、子窗口关闭并刷新父口，这里有两种方式：
1) 子窗口关闭时关闭父窗口：
opener.location.reload(); window.close();
2) 父窗口去检测，子窗口是否已经关闭了，在设定的一段时间之后自动刷新：
<script>
var newWindow;
var timer;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
timer = setInterval("updateAfterClose()", 1000);
}
function updateAfterClose() {
//父窗口去检测子窗口是否关闭，然后通过自我刷新，而不是子窗口去刷新父窗口
if(newWindow.closed == true) {
clearInterval(timer);
self.location.reload(); // 主窗口刷新
return;
}
}
</script>
4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件：
<script>
var newWindow;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
}
function closeChild()
{
newWindow.close();
}
</script>
在body加上onunload事件：
<body onunload="closeChild()">
5、子窗口中关闭父窗口，这个功能可能相对要少用一点：
<script>
function closeParent()
{
opener.close();
}
</script>
<input type=button value="关闭父窗口" onclick=closeParent()>
以上所述是小编给大家介绍的JavaScript中的子窗口与父窗口的互相调用问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法,涉及javascript页面元素与事件相关操作技巧,需要的朋友可以参考下2017-04-04
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
uni-app 项目中 “文件查找失败：‘crypto-js‘“ 的问题及解决方法
在开发使用 uni-app 框架的项目时,遇到依赖问题是常见的,本文将介绍如何解决编译过程中出现的 “文件查找失败：‘crypto-js’” 错误,并说明这种错误为什么会发生以及如何避免,下面分步骤给大家带来解决方案,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了小程序绑定用户方案优化小结，该类小程序在使用之前就需要绑定用户信息。常见于线下门店类功能性小程序。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
打开一个小程序，我们会发现，一般构图排版都是图片banner - 快捷按钮 - 产品/文章列表等详细信息，底部导航一般是2~5个。这样的排版是比较美观的，那么为什么要这样设计，这些轮播图、快捷按钮等小程序组件都有什么用呢？接下来就带你详细了解下2022-12-12
这篇文章主要介绍了微信小程序网络层封装（promise, 登录锁），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
本文主要对JavaScript的数据存储，产生性能问题的原因，内存泄露的几种情况等做了简要分析介绍，需要的朋友可以看下2016-12-12
这篇文章主要介绍了JavaScript中用字面量创建对象介绍,本文直接给出代码实例,并讲解了一些技巧,需要的朋友可以参考下2014-12-12
在JavaScript开发中，被人问到：null与undefined到底有啥区别？一时间不好回答，特别是undefined，因为这涉及到undefined的实现原理。2011-08-08
最新评论