JS子父窗口互相取值赋值详解介绍

本文章总结了一些七七八八的关于JS子父窗口互相取值赋值用法详细,文章有点长但是很好的讲述了子父窗口之间的相互操作赋读取值,有需要了解的朋友可参考,子窗口赋值到父窗口,代码如下:

<script>  

function openWin(str) {  

    window.open(siteurl+"popup/"+str, null,'width=800,height=500'); // 打开窗口  

}   

</script>   

<input type="text" id="title" name="picPath" value="<?php if(isset($pic)) {echo $pic['Path'];}?>" />   

<a href="javascript:;" onclick="openWin('searchPic');">图片</a>

子窗口,代码如下:

<html>  

    <head>  

        <title>图片搜索</title>  

    </head>  

    <body>  

        <script>  

            function getValue() {  

                window.opener.document.getElementById('title').value = document.getElementById('picPath').value // 赋值  

                window.close(); // 关闭窗口  

            }  

        </script>  

        <input type="text" id="picPath" />  

        <input type="button" value="确定" onclick="getValue()" />  

    </body>

1、子窗口与父窗口间通信

(1) 使用window.open()创建的窗口与父窗口通信,可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作,代码如下:

window.opener.location.reload(); //子窗口刷新父窗口

window.opener.location.href //获取父窗口href

window.opener.locaiton.pathname //获取父窗口路径名

//刷新父页面

window.location.href=window.location.href ; //重新定位父页面

window.location.reload;

(2) 模态窗口与父窗口通信

通过使用showModelDialog(),及showModelessDialog（）方法创建的子窗口想与父窗口通信时，不能通过window.opener来获取父窗口对象。要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象,实现方式为,在父窗口中,代码如下:

var newWin=window.showModelDialog(url,window,”);

newWin.open();

此时参数window即是父窗口对象

例子:A页面,代码如下:

        function popUp(url) {    

            objSubWin = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=80");    

            objSubWin.focus();    

        }    

    

        function SetValue(val) {    

            var amount = document.getElementById('<% = TextBoxAmount.ClientID %>');    

         amount.value = val;    

     }    

    

    </script>    

    

<asp:TextBox ID="TextBoxAmount" runat="server" Enabled="false"></asp:TextBox>    

            <asp:Button ID="Button1" runat="server" Text="Call child window" OnClientClick="popUp('PageB.aspx')" />

B页面：

<script type="text/javascript">  

        function isNumeric(keyCode) {  

            return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8)  

        }  

   

        function calc() {  

            if (window.opener != null && !window.opener.closed) {  

                var qty = document.getElementById('<% = TextBoxqty.ClientID %>');  

                var price = document.getElementById('<% = TextBoxPrice.ClientID %>');  

   

                window.opener.SetValue(parseInt(qty.value) * parseInt(price.value));  

            }  

        }  

    </script>  

数量<asp:TextBox ID="TextBoxqty" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>  

            * 单价<asp:TextBox ID="TextBoxPrice" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>  

            <asp:Button ID="Button1" runat="server" Text="Calculate" OnClientClick="calc()" />

在子窗口中：需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象,获取方式如下：

var parent=widnow.dialogArguments；

变量parent便是父窗口对象。

例如:如下代码:

//通过子窗口提交父窗口中的表单：form1,提交后执行查询操作  

var parent=window.dialogArguments;  

parent.document.form1.action="QueryInfor.jsp";  

parent.submit();  

//刷新父页面  

var parent=window.dialogArguments;  

parent.location.reload();  

//从子窗口传值到父窗口

要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成,实现方法如下,在子窗口中：

//获取父窗口某字段值，对该值加一后返回父窗口  

var parent=window.dialogArguments;  

var x=parent.docuement.getElementById("age").value;  

x=x+1；  

//传回x值  

window.returnValue=x;

在父窗口中,代码如下:

//获取来自子窗口的值  

var newWin=window.showModelDialog(url,window,'');  

if(newWin!=null)  

document.getElementByIdx_x("age").value=newWin;  

//在子窗口中设置父窗口的值

在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定，因为如果使用了不切实际的方法不仅降低开发效率，也降低了执行效率，往往也会造成不优雅的实现方式和代码风格。

子窗口设置父窗口的值使用方法如下：

var parent=window.dialogArguments;  

var x=parent.document.getElementByIdx_x("age").value;  

x=x+1；  

//设置父窗口中age属性值  

parent.document.getElementByIdx_x("age").value=x;

子窗口和父窗口交互的内容，是把子窗口的信息传递给父窗口，并且关闭自己等等，或者是父窗口把自己的信息传递给子窗口等等。

1。父窗口传递信息给子窗口,看代码实例：

<script language=javascript>  

function outPut()  

{  

//获取父窗口的文本信息赋值给text  

var text = document.abc.text.value;  

//打开子窗口，并且把操作句柄赋值给win变量，以下所有操作都是针对win对象的  

var win = window.open(”",”mywin”, “menubar=no,width=400,height=100,resizeable=yes”);  

//输出基本信息  

win.document.writeln(”<title>输出结果</title>”);  

win.document.writeln(”你的信息是：<p>”);  

//输出从父窗口获取的信息  

win.document.writeln(text);  

win.document.close();  

win.focus();  

}  

</script>  

  

<form name=abc method=post>  

<input type=text name=text size=50>  

//调用上面的函数  

<input type=button value=提交 onClick=”outPut()”>  

</form>

2。子窗口传递参数给父窗口,我们对上面的代码进行改造,代码如下:

3。不是同页面的子窗口和父窗口交互

假设我们涉及到外部程序，比如php、asp等等，那么我们处理的可能是两个页面，比如，上传功能，我们就是需要打开一个新页面，然后再把新页面中的值传递给父页面。

局部代码实例：

以上是父窗口的部分代码，里面的popUpWindow是封装好的window.open函数，所以理解面面的tag.php是另外一个页面就可以，我们需要把当前表单中的值提交给tag.php页面去处理。

tag.php部分代码,查询标签结果：

<a href=”#” name=”tag_1″>生活</a><a href=”#” onclick=”opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML”>加入该标签</a>
<a href=”#” name=”tag_2″>生活秀</a><a href=”#” onclick=”opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML”>加入该标签</a>

这个就是我们的子窗口，g:w7垠件的专e 育,网E我们要把tag_1和tag_2返回到子窗口中，虽然他们不是同一个页面。这里有个知识点，就是我们如何获取连接中的值，我们使用 innerHTML属性：document.tag_2.innerHTML 这个就是我们获取了tag_2的值“生活秀”，我们也能使用其他方法获取，比如：document.all.tag_2.innerHTML，
或者this.innerHTML就是指本身的链接的值。

访问父窗口也是使用opener对象来处理：opener.document.tryst_form.input_tag.value，
就能够改变父窗口的值。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/829.html

JS子父窗口互相取值赋值详解介绍

相关推荐

发表评论