JS子窗口向父窗口传值

最新推荐文章于 2022-01-18 18:00:49 发布

fjguodong

最新推荐文章于 2022-01-18 18:00:49 发布

阅读量370

点赞数

分类专栏： javascript 文章标签： javascript 弹出式窗口弹窗返回值 ViewUI

本文链接：https://blog.csdn.net/fjguodong/article/details/84477928

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS子窗口向父窗口传值

作者：阿明

转自：http://blog.sina.com.cn/s/blog_4e25ddcd0100beo8.html

方法一:用模式窗口

returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口就是子窗口，打开后不能操作父窗口,只能等模式窗口关闭时才能操作)时,用于返回窗口的值,下面举个例子:
------------------------------------------------------------------------------
//father.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function showmodal(){
var ret = window.showModalDialog("child.html",null,"dialogWidth:350px;dialogHeight:350px;help:no;status:no");
if (ret){alert('子窗口返回真!');
}else{
alert('子窗口返回假!');
}
}
</script>
</HEAD>
<BODY>
<INPUT id=button1 type=button value=Button name=button1 οnclick="showmodal();">
</BODY>
</HTML>
------------------------------------------------------------------------------
//child.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function trans(tag){
   if (tag==0){
     window.returnValue=false;
   } else{
     window.returnValue =true;
   }
   window.close();
}
</script>
</HEAD>
<BODY>
<INPUT id=button1 type=button value="返回真" name=button1 οnclick="trans(1)">
<INPUT id=button2 type=button value="返回假" name=button2 οnclick="trans(0)">
</BODY>
</HTML>
-----------------------------------------------------------------------------
这样一来可以实现从模式窗口向父窗口传递值的作用,
这个returnValue除了可以是布尔值,整型值等以外还可以是个js数组，用来传递大量数据。

showModalDialog，是模态窗口，始终获得焦点，但弹出的窗体不能刷新，此弹出的窗口里操作button,要想不弹出新窗口，需在

弹出的窗口中在<head>和</head>之间加<base target="_self">。

方法二:用opener

这是一个父窗口～

<html>
<head>
<title>
</title>
<script language="javascript">
function win(){
window.open("login.html",null,"height=150,width=200");
}

</script>
</head>
<table id="t1">
<tr><td id="dd">user</td></tr>
<tr><td id="bb">sex</td></tr>
</table>
<input type="button" value="提交" οnclick="win()"/>
</html>

下面是一个子窗口

<html>
<head>
<title>
</title>
<script language="javascript">
function win(){

window.opener.document.all.dd.innerText=document.getElementByIdx("user").value;
window.opener.document.all.bb.innerText=document.getElementByIdx("sex").value;

window.close();
}

</script>
</head>
<body>
user:
<input type="text" name="user"/>
<br>sex:
<input type="text" name="sex"/>
<br>
<input type="button" value="提交" οnclick="win()"/>
</body>
</html>

PS:

两个方法都很容易理解，第一种方法中window.showModalDialog()方法和window.returnValue属性都没有

在W3School文档的window对象介绍中找到，但是有找到window.opener属性。

---------------------------------------------------------------------------------------------------------

定义和用法

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。

opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。

语法

window.opener

提示和注释

注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。

属性	描述	IE	F	O
opener	返回对创建此窗口的窗口的引用。	4	1	9

---------------------------------------------------------------------------------------------------------

考虑到兼容性，感觉用第二个方法比较好一点，但是这个方法对于含有框架页面的窗口是无效的。

而观察现在的很多网站的页面，这种真弹出式的窗口一般都不用了，而是用"DIV+CSS“实现的伪弹出窗口来替代这种窗口，因此上面的两种方式反而用的少了，只有一些老系统或者公司内部专用的系统可能还有这些用法。

fjguodong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS子窗口向父窗口传值

JS子窗口向父窗口传值作者：阿明转自：http://blog.sina.com.cn/s/blog_4e25ddcd0100beo8.html 方法一:用模式窗口returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口就是子窗口，打开后不能操作父...
复制链接

扫一扫