js 父窗口赋值

在JavaScript中，父窗口赋值通常涉及到跨窗口或跨iframe的通信。这种通信可以通过window.parent对象来实现，它允许子窗口（如iframe内的页面）访问其父窗口的对象和属性。

基础概念

window.parent：这是一个指向当前窗口的父窗口的引用。如果当前窗口没有父窗口（即它是顶级窗口），则window.parent将引用当前窗口自身。
window.postMessage：这是一个安全的跨源通信方法，允许不同源的窗口之间传递消息。

类型与应用场景

类型：主要涉及到window.parent属性的使用和window.postMessage方法的调用。
应用场景：

示例代码

假设我们有一个父页面和一个嵌入的iframe子页面，我们想要从子页面向父页面传递一个值。

父页面HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="child.html"></iframe>
    <script>
        // 监听来自子窗口的消息
        window.addEventListener('message', function(event) {
            // 验证消息来源（可选）
            if (event.origin !== 'http://example.com') return;

            // 获取消息数据
            var data = event.data;
            console.log('Received data from child:', data);

            // 在父窗口中显示接收到的数据
            document.body.innerHTML += '<p>Data from child: ' + data + '</p>';
        });
    </script>
</body>
</html>

子页面HTML（child.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <script>
        // 向父窗口发送消息
        window.parent.postMessage('Hello from child!', 'http://example.com');
    </script>
</body>
</html>