JS父页面与子页面相互传值方法

在JavaScript中，父页面与子页面（通常指iframe或不同页面通过窗口（window）对象进行交互）之间的通信可以通过几种方式实现。这里介绍两种常见的方法：

### 1. 使用`window.postMessage`

这是HTML5引入的一个API，允许来自不同源的页面安全地进行跨源通信。

**父页面向子页面发送消息**：

假设子页面的iframe有一个特定的`id`或者`name`属性，你可以通过`contentWindow`属性访问iframe的`window`对象，然后调用`postMessage`方法发送消息。

// 假设iframe的id是'myIframe'
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;

// 发送消息到子页面
iframeWindow.postMessage('Hello from parent!', '*'); // '*' 表示接受任何来源的消息，也可以指定具体的源

**子页面接收父页面消息**：

在子页面的JavaScript中，监听`message`事件来接收消息。

window.addEventListener('message', function(event) {
    // 检查event.origin是否是预期的源，以避免安全漏洞
    if (event.origin !== "http://expected-source.com") return;

    // 处理接收到的数据
    console.log('Received message:', event.data);
}, false);

**子页面回复父页面**：

子页面可以使用相同的`postMessage`方法回复父页面，通过`window.parent`来引用父窗口。

// 回复父页面
window.parent.postMessage('Hello back from child!', '*');

### 2. 通过URL参数（适用于简单数据或一次性传递）

对于简单的数据或一次性传递，父页面可以通过改变子页面的URL（包括查询字符串）来传递数据，子页面在加载时解析这些参数。

**父页面设置子页面URL**：

var iframe = document.getElementById('myIframe');
iframe.src = 'child.html?data=Hello';

**子页面解析URL参数**：

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

var data = getURLParameter('data');
console.log(data); // 输出: Hello

注意：使用URL参数传递数据可能不适合敏感信息，因为它会暴露在浏览器的历史记录和URL中。此外，对于大型数据或频繁的数据交换，使用`postMessage`是更合适的选择。