使用 JavaScript 从子窗口或父窗口访问父窗口或子窗口
3.80/5 (11投票s)
本文解释了从子浏览器窗口访问父浏览器窗口中的数据或反之亦然的基本选项。
引言
本文解释了从子浏览器窗口访问父浏览器窗口中的数据或反之亦然的基本选项。我说“父”窗口是指打开另一个浏览器窗口的浏览器窗口，“子”窗口是指新打开的窗口。有时在开发 Web 应用程序时，您可能会遇到一种情况，即需要从弹出窗口或类似窗口访问父窗口中的 HTML 表单和控件，本文提供了一些实现此目的的解决方案。本文仅考虑 IE 和 Firefox，这些选项也可能在其他浏览器中起作用。我将介绍一些基本选项，这些选项可以立即供您在工作中直接使用，而不是分析针对特定需求的各种可用选项/解决方法。
讨论的主题
-
使用
window.opener对象从子窗口访问父浏览器窗口 - (兼容 IE 和 Firefox) -
使用
window.showModalDialog()从子窗口向父浏览器窗口发送数据 - (仅限 IE，在 Firefox 中不起作用) - 从父窗口访问子浏览器窗口 - (目前在 Firefox 中无法使其工作)
- 调用父窗口中的 JavaScript 函数，或在子窗口和父窗口之间相互调用 - (IE 和 Firefox)
使用 window.opener 对象从子窗口访问父浏览器窗口：(兼容 IE 和 Firefox)
window.opener 对象可用于从子窗口（弹出窗口或类似窗口）访问父浏览器窗口中的 HTML 元素。
让我们考虑两个 HTML 文件
openwindow.htm – 包含一个文本框和一个按钮，点击按钮会在新浏览器窗口中打开 target.htm 文件
target.htm – 包含代码，用于更改打开此文件的父窗口（openwindow.htm）中的文本框的值
openwindow.htm:
<html>
<script language="javascript">
function openwindow()
{
window.open("target.htm","_blank","height=200,width=400,
status=yes,toolbar=no,menubar=no,location=no")
}
</script>
<body>
<form name=frm>
<input id=text1 type=text>
<input type=button onclick="javascript:openwindow()" value="Open window..">
</form>
</body>
</html>
如果您不熟悉 window.open() 方法，您可能会想知道 "height=200, width=400,status=yes,toolbar=no,menubar=no,location=no" 是什么意思，不用担心，它只是指定新窗口的大小和外观，您可以将此行代码更改为 window.open("target.htm","_blank")，然后观察输出差异。
请注意，如果未提供参数 ”_blank”，则 IE 和 Firefox 的功能将有所不同，在 Firefox 中，将打开一个新选项卡而不是一个新窗口。只需使用 window.open("target.htm") 即可自行观察差异。有关 window.open() 方法及其参数的更多信息，请参阅 http://msdn2.microsoft.com/en-us/library/ms536651(VS.85).aspx。另请注意，在 <input id=text1 type=text> 中，id 属性是必需的，否则 target.htm（如下所示）的代码将无法在 Firefox 中执行。
target.htm:
<html>
<script language="javascript">
function changeparent()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
<body>
<form>
<input type=button onclick="javascript:changeparent()" value="Change opener's textbox's value..">
</form>
</body>
</html>
希望您能理解上述代码的含义，在新窗口（target.htm）中，我们使用 window.opener 对象来访问父窗口（openwindow.htm）中的文本框。您只需在您将在父窗口的 HTML 页面中编写的代码前面加上“window.opener.”即可访问其元素。
使用 window.showModalDialog() 从子窗口向父浏览器窗口发送数据：(仅限 IE，在 Firefox 中不起作用)
如果您想打开一个模态对话框并在其中访问父窗口的元素，则可以使用此方法，但这仅在 IE 中有效。（如果您不熟悉模态对话框一词，请参阅 http://en.wikipedia.org/ wiki/Modal_window）这里我们将调用 window.showModalDialog() 方法来打开子窗口，并将此方法的返回值分配给一个 js 变量，window.showModalDialog() 方法的返回值在子窗口中使用 window.returnValue 属性提供，如下面的示例所示。
这里我将展示两个文件，与 window.opener 对象示例类似。
showmodal.htm – 包含一个文本框和一个按钮，点击按钮会在新浏览器窗口中打开 modaltarget.htm 文件
modaltarget.htm – 包含代码，用于更改打开此文件的窗口中的文本框的值
showmodal.htm:
<html>
<script language="javascript">
function openwindow()
{
retval=window.showModalDialog("modaltarget.htm")
document.getElementById('text1').value=retval
}
</script>
<body>
<form name=frm>
<input name=text1 type=text>
<input type=button onclick="javascript:openwindow()" value="Open window..">
</form>
</body>
</html>
modaltarget.htm:
<html>
<head>
<script language="javascript">
function changeparent()
{
window.returnValue="Value changed.."
window.close()
}
</script>
</head>
<body>
<form>
<input type=button onclick="javascript:changeparent()" value="Change main window’s textbox value..">
</form>
</body>
</html>
正如您所见，在 showmodal.htm 中，retval 变量被赋值为 window.showModalDialog() 方法调用的结果，下一行设置文本框的值，但这行代码将在模态窗口关闭时执行。在所有模态窗口调用中，下一行代码仅在模态对话框关闭后才执行，这就是我在此处关闭窗口的原因，以便在 modaltarget.htm 中设置 returnValue。如果您删除 window.close()，那么在手动关闭窗口之前，changeparent() 函数中的第二行代码将不会执行。showModalDialog() 不是 w3c 标准，并且不受 Firefox 支持。
有一个名为 showModelessDialog() 的方法，如果您有兴趣显示无模式对话框，可以使用它。由于我的目的是向读者提供基本选项和快速解决方案，并且此无模式功能可以使用 window.open() 完成，因此我不再解释。
从父窗口访问子浏览器窗口：(在 Firefox 中不起作用)
我们可以使用 window.open() 方法返回的窗口句柄来访问子窗口元素，如下所示
winobj=window.open(..)
...
winobj.document.getElementById("elementname").value=""
winobj 实际上是新创建窗口的一个 window 对象实例。
调用父/客户端窗口中的 JavaScript 函数
从子窗口调用父窗口中的 JavaScript 函数： (IE 和 Firefox)
您可以使用以下语法实际调用父窗口中存在的 JavaScript 函数
window.opener.functioname()
从父窗口调用子窗口中的 JavaScript 函数： (IE 和 Firefox)
要调用子窗口中的 JavaScript 函数，请使用如下所示的窗口句柄
winobj=window.open(..)
...
winobj.functionname()
在某些情况下，我们甚至可以有一个带有参数的函数，并将其用作在父浏览器窗口和子浏览器窗口之间共享数据的解决方法，如下所示
window.opener.functioname(arg1,arg2,..)
- 从子窗口将数据发送到父窗口
winobj.functioname(arg1,arg2,..)
- 使用从 window.open() 获取的窗口句柄将数据从父窗口发送到子窗口
本文中提到的选项可用于访问多个子窗口，并且多个子窗口也可以访问单个父窗口。
结论
我已解释了访问和共享子浏览器窗口与父窗口之间数据的方法。可能还有许多其他此类选项或解决方法，如果有，请留下评论并说明您的方法。