JS子窗体传值给父窗体

核心提示：a.htm中一段JS function init(){ var drag1=document.getElementById( 'addnew' ); var drag1bar=drag1.getElementsByTagName( 'h3' )[0]; new DragObject({module:drag1,handle:drag1bar}); var addnewPop= new Popup({module:drag1,background:document.ge

a.htm中一段JS

function init(){
    var drag1=document.getElementById('addnew');
    var drag1bar=drag1.getElementsByTagName('h3')[0];
    new DragObject({module:drag1,handle:drag1bar});

    var addnewPop=new Popup({module:drag1,background:document.getElementById('transparent')});
    document.getElementById('addnew_btnclz').onclick=addnewPop.hide;
    document.getElementById('switch').onclick=addnewPop.show;
}

点击<button id=switch></button>运行上面的document.getElementById('switch').onclick=addnewPop.show;

如果想在a.htm里面<iframe>一个b.htm页面.通过点击b.htm页里的<button id=switch></button> 运行a.htm里面的
document.getElementById('switch').onclick=addnewPop.show;

这个传值应该怎样写?

在a.htm中加上

function zoom6ugo(myform)
{
document.getElementById(myform).click();
}

b.htm   中

<a href="javascript:parent.zoom6ugo('switch')"><div id=swithc></div></a>

子父窗体间传值最重要的是:window.opener.document.getElementById("文本框的ID").value="123456";

或者是：window.opener.document.getElementByName("文本框的名字").value="123456";

1.htm 父窗体代码

<script language="javascript" >

function toUrl()

{

window.open("2.htm","_blank");

}

function getvalue(a)

{ Form1.Text1.value=a; }

</script>

<form id="form1">

<input id="text1" width=150px/>

<input id="button1" name="button1" onclick="toUrl()"/>

</form>

2.htm 子窗体

<script language="javascript" >

function goBack()

{

window.opener.getvalue("123");

window.close();

}

</script>

<form id="form1">

<input id="button1" name="button1" onclick="goBack()"/>

</form>

子窗体父窗体之间传值通过摸态对话框，试验代码

1.htm 父窗体

<script language="javascript" >

function transVal()

{

var newwin=window.showModalDialog("2.htm",window);

if(newwin!="[object]")

{ document.getElementById("Text1").value=newwin; }

}

</script>

<form id="form1">

<input id=text1 width=150px/>

<input type="button" id=button1 onclick="transVal()"/>

</form>

2.htm 子窗体

<script language="javascript" >

function reVal()

{var x="123";

window.returnValue=x;

window.close();}

</script>

<form id="form1">

<input type="button" id=button1 onclick="reVal()"/>

</form>

两种弹出窗口

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

window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名

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

(2) 模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog（）方法创建的子窗口想与父窗口通信时，不能通过window.opener

来获取父窗口对象。要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象。

实现方式为：

在父窗口中：

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

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

在子窗口中：

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

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.getElementById("age").value=newWin;

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

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

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

子窗口中：

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1；
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;

以上是我在项目中使用javascript解决子窗口问题时，收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的（这主要与项目本身有关），不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与父窗口之间的关系和角色之后，就很好理解了。