正文

学会JS父子窗口辨别，轻松实现页面间信息传递

/0 浏览量
0422

在Web开发中，父子窗口之间的信息传递是一个常见的需求。通过JavaScript，我们可以轻松实现这一功能。本文将详细介绍如何辨别父子窗口，并展示如何在不同页面间传递信息。

一、父子窗口的辨别

在JavaScript中，我们可以通过window.parent和window.top来辨别父子窗口。

  • window.parent：表示当前窗口的父窗口。如果当前窗口是顶级窗口（即没有父窗口），则window.parent将等于window.top。
  • window.top：表示当前窗口的顶级窗口。如果当前窗口是顶级窗口，则window.top等于window.parent。

以下是一个简单的例子：

if (window.parent !== window.top) {
    console.log('当前窗口有父窗口');
} else {
    console.log('当前窗口是顶级窗口');
}

二、页面间信息传递

1. 父窗口向子窗口传递信息

假设我们有一个父页面parent.html和一个子页面child.html。在父页面中，我们可以通过window.frames或document.frames来访问子窗口，并使用window.postMessage方法向子窗口传递信息。

// 父页面
function sendMessageToChild() {
    const childWindow = window.frames['child'];
    childWindow.postMessage('Hello, child!', 'http://child.com');
}

// 子页面
window.addEventListener('message', function(event) {
    if (event.origin === 'http://parent.com') {
        console.log('Received message from parent:', event.data);
    }
});

2. 子窗口向父窗口传递信息

同样地，子窗口也可以通过window.parent.postMessage方法向父窗口传递信息。

// 子页面
function sendMessageToParent() {
    window.parent.postMessage('Hello, parent!', 'http://parent.com');
}

// 父页面
window.addEventListener('message', function(event) {
    if (event.origin === 'http://child.com') {
        console.log('Received message from child:', event.data);
    }
});

3. 跨域信息传递

在实际应用中，父子窗口可能位于不同的域。在这种情况下，我们需要设置CORS（跨源资源共享）策略，允许跨域通信。

在父页面中，我们可以通过event.origin属性来验证消息来源。

// 父页面
window.addEventListener('message', function(event) {
    if (event.origin === 'http://child.com') {
        console.log('Received message from child:', event.data);
    }
});

在子页面中，我们需要在服务器端设置CORS策略，允许父页面访问。

// 服务器端代码（以Node.js为例）
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://parent.com');
    next();
});

三、总结

通过以上介绍，相信你已经学会了如何辨别父子窗口，以及如何在页面间传递信息。在实际开发中，灵活运用这些技巧，可以让你轻松实现各种页面交互需求。

-- 展开阅读全文 --