Javascript 中父窗口与子窗口的交互

有时我们需要在父窗口和子窗口中进行交互,比如在子窗口中上传完文件,将上传的结果返回到父窗口中。本文介绍的就是一个简单的交互实例。如果你的头脑够灵活,完全可以举一反三。

Javascript 中父窗口与子窗口的交互 – 示例

 
<script type="text/javascript">
<!--
function openWindow()
{
	newWindow = window.open('','newWindow','height=300,width=300,scrollbars=auto');  
	if (newWindow != null)
	{
       var windowHTML= "<html><head><title>preview</title></head>";
       windowHTML += "<body><h1 align='center'>";
       windowHTML += "这是子窗口!</h1><hr><div align='center'><form action='#' method='get'>";
       windowHTML += "<input type='button' value='将父窗口的背景设为红色' onclick='window.opener.document.body.style.backgroundColor="red";' /><br>";
       windowHTML += "<br ><input type='button' value='关闭' onclick='self.close();' />";
       windowHTML += "</form></div></body></html>";

       newWindow.document.write(windowHTML);
       newWindow.focus();
    }
}
//-->
</script>
 
<input value='打开子窗口' onclick="openWindow();" type="button">
<input type="button" value="将子窗口的背景设为蓝色" onclick="if (window.newWindow){newWindow.document.bgColor='blue';newWindow.focus();}" />

Javascript 预览代码

在我们编写了客户端代码,如 css、javascript、(x)html后,通常需要进行调试,而本代码可以让您在新打开的窗口中预览,方便及时修改。同时也可以用于代码演示。

Javascript 预览代码 – 示例

 
<textarea cols="70" rows="20" id="code"></textarea>

<script type="text/javascript">
<!--
function openWindow()
{
	newWindow = window.open('','newWindow','height=300,width=500,scrollbars=auto');  
	if (newWindow != null)
	{
		var windowHTML= document.getElementById('code').value;

		newWindow.document.write(windowHTML);
		newWindow.focus();
	}
}
//-->
</script>

<br /><br />
<input value='预览代码' onclick="openWindow();" type="button" />

更新记录后关闭子窗口并刷新父窗口的Javascript

有时我们需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口".

更新记录后关闭子窗口并刷新父窗口的Javascript – 示例

父窗口代码:

 
<a href="javascript:void(0)" onclick="window.open('child.html','child','width=400,height=300,left=200,top=200');">打开子窗口</a>

子窗口代码:

 
<script language="JavaScript" type="text/javascript">
<!--
function refreshParent()
{
	window.opener.location.href = window.opener.location.href;
	if (window.opener.progressWindow)
	{
		window.opener.progressWindow.close();
	}
	window.close();
}
//-->
</script>

<a href="javascript:void(0)" onclick="refreshParent()">刷新父窗口并关闭当前窗口</a>

实现的关键代码是在子窗口里面,父窗口只是执行打开子窗口的动作.