JS子窗口调用父窗口_js子页面调用父页面方法资源-CSDN文库

需积分: 50 51 浏览量 2014-12-24 08:54:00 上传评论收藏 877B TXT 举报

### JS子窗口调用父窗口的关键知识点 #### 一、基本概念在JavaScript中，有时我们需要从一个子窗口（通常是通过`window.open()`方法打开的新窗口）与父窗口（即打开该新窗口的原始窗口）之间进行交互。这种交互可能包括调用父窗口中的函数或修改父窗口中元素的状态等。为了实现这一目的，JavaScript提供了几个内置属性来帮助完成这类操作，主要包括`window.parent`和`window.opener`。 #### 二、`window.parent`的使用 ##### 2.1 `window.parent`的定义 `window.parent`属性返回当前窗口对象的父级窗口对象。如果当前窗口是在顶层，则`window.parent`返回当前窗口自身。 ##### 2.2 示例代码假设我们有一个父窗口页面`parent.html`，其中包含了一个函数`bb()`；我们还打开了一个子窗口页面`child.html`，在这个子窗口中，我们希望调用父窗口中的`bb()`函数。 **父窗口（`parent.html`）代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parent Window</title> </head> <body> <button onclick="openChild()">Open Child Window</button> <script> function bb() { console.log('Function bb is called from the parent window.'); } function openChild() { window.open('child.html', 'child', 'width=300,height=200'); } </script> </body> </html> ``` **子窗口（`child.html`）代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Window</title> </head> <body> <button onclick="callParentFunction()">Call Parent Function</button> <script> function callParentFunction() { // 使用parent属性访问父窗口，并调用其函数 window.parent.bb(); } </script> </body> </html> ``` #### 三、`window.opener`的使用 ##### 3.1 `window.opener`的定义 `window.opener`属性返回打开当前窗口的窗口对象。如果当前窗口不是通过`window.open()`方法打开的，则`window.opener`返回`null`。 ##### 3.2 示例代码 **父窗口（`parent.html`）代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parent Window</title> </head> <body> <button onclick="openChild()">Open Child Window</button> <script> function test() { console.log('Function test is called from the parent window.'); } function openChild() { window.open('child.html', 'child', 'width=300,height=200'); } </script> </body> </html> ``` **子窗口（`child.html`）代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Window</title> </head> <body> <button onclick="callParentFunction()">Call Parent Function</button> <script> function callParentFunction() { // 使用opener属性访问父窗口，并调用其函数 if (window.opener && !window.opener.closed) { window.opener.test(); } else { console.log('The parent window is not available or has been closed.'); } } </script> </body> </html> ``` #### 四、总结 - **`window.parent`**：用于访问父窗口，无论当前窗口是否是通过`window.open()`方法打开的。 - **`window.opener`**：用于访问打开当前窗口的父窗口，仅当当前窗口是由`window.open()`方法打开时有效。这两种方法可以有效地实现子窗口与父窗口之间的交互，但在实际开发中需要注意浏览器的安全策略限制，特别是跨域问题可能会导致访问被拒绝。因此，在设计此类功能时，建议充分考虑安全性及兼容性问题。

资源推荐

资源详情

资源评论

1、JS子窗口调用父窗口的方法
(1)、子窗口中写：
function aa() {
parent.bb();
}
父窗口中写：
function bb() {
....
}
(2)、只需子窗口中写：
function aa() {
var _parentWin = window.parent ;
_parentWin.similarity.value = score; // similarity为input的id
}

window.opener 实际上就是通过window.open打开的窗体的父窗体。

比如在父窗体parentForm里面通过 window.open("subForm.html"),那么在subform.html中 window.opener

就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。

如：1,window.opener.test(); ---调用父窗体中的test()方法

2,如果window.opener存在,设置parentForm中stockBox的值。

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈