JavaScript子父窗口操作

来源：互联网 2023-03-16 23:56:54 145

JavaScript在进行窗口操作时存在着父-子窗口的关系，如通过一个父窗口的open()函数打开的窗口称为子窗口，在子窗口中通过opener属性取得打开窗口的操作对象。下面为大家介绍子父窗口之间的交互操作。

工具/原料

首先我们需要创建父窗口，我们创建一个新的html文档，在本程序的父窗口中，我们通过window.open()函数打开了一个新的窗口，然后在新窗口中即可通过opener操作父窗口中的对象。

JavaScript子父窗口操作

下面我们定义一个子窗口，在程序弹出子窗口页面后，会通过opener对象调用页面的刷新操作，这样父窗口的显示内容就会自动刷新，代码如下图所示。

JavaScript子父窗口操作

下面我们介绍如何利用opener属性演示从子窗口返回内容给父窗口的操作。我们在父窗口中新增文本框，用于接收子窗口的返回。

JavaScript子父窗口操作

我们在子窗口中定义一下下拉列表框，通过下拉选择，将选中的选项返回给父窗口。在本程序中的returnValue()函数中，通过opener取得了父窗口的操作对象，并且将下拉列表框中选择的内容设置给了父窗口的result文本框。

JavaScript子父窗口操作

我们在parent.html中右键选择在浏览器中打开，页面如下图所示。注意在Chrome浏览器中打开会报错，window.opener.document提取不到父窗口数据，因为本地file浏览器测试不能用chrome（webkit核心的浏览器），不能互相操作。

JavaScript子父窗口操作

5本页面未经许可获取自百度经验

我们使用火狐浏览器打开，在父窗口中点击打开按钮，此时会打开子窗口，在子窗口中选择城市后，点击返回按钮，此时子窗口会被关闭，子窗口选择的结果将会显示在父窗口页面。

JavaScript子父窗口操作

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！