当前位置：首页 > 资讯 > 技术文档

JavaScript中的子窗口与父窗口的互相调用问题

时间：2020-05-29 15:31 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript中的子窗口与父窗口的互相调用问题

[b]注意：要用open打开才行，如果用openModal打开则会访问不到opener.[/b] [b]open的参数：[/b]

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为允许; [b]1、从子窗口中往父窗口传值[/b] 如父页面有一个控制的id是choosedProvider，那么这样可以把值传给父页面：

opener.document.getElementById("choosedProvider").value="Tom";

[b]2、从父窗口传值给子窗口，如子窗口中有id为T的控件，此时可以用如下传值：[/b]

<script> 
var newWindow; 
function openWindow(url){ 
newWindow = window.open(“new.htm”, "", "width=400,height=300 "); 
} 
function changeChild(){ 
newWindow.document.getElementById("T").value="我变了"; 
} 
</script>

[b]3、子窗口关闭并刷新父口，这里有两种方式：[/b] 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>

[b]4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件：[/b]

<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()">

[b]5、子窗口中关闭父窗口，这个功能可能相对要少用一点：[/b]

<script> 
function closeParent() 
{ 
opener.close(); 
} 
</script> 
<input type=button value="关闭父窗口" onclick=closeParent()>

以上所述是小编给大家介绍的JavaScript中的子窗口与父窗口的互相调用问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：详解前端路由实现与react-router使用姿势
下一篇：学习Bootstrap滚动监听附调用方法

资讯排行榜
更多>>