JS简单实现父子窗口传值功能示例【未使用iframe框架】

下面是对“JS简单实现父子窗口传值功能示例【未使用iframe框架】”的详细攻略：

1. 基本实现原理

在父窗口中，定义以下函数：

function sendData(data) {
    var childWindow = window.open('child.html', 'childWindow');
    childWindow.data = data;
}

该函数用于传递数据给子窗口，其中child.html是子窗口的html页面。

在子窗口中，定义以下代码：

var data = window.opener.data;
console.log(data);

该代码用于接收从父窗口传递来的数据，并将其打印输出到浏览器控制台。

在父窗口中，调用函数并传递需要传递的数据：

sendData('Hello, world');

当父窗口调用该函数时，将在新的窗口中打开子窗口，并将数据'Hello, world'传递给子窗口。子窗口接收到数据后，将其打印输出到浏览器控制台。

在父窗口中，定义以下代码：

window.addEventListener('message', function(e) {
    console.log(e.data);
});

该代码用于接收从子窗口传递来的数据。message事件会在接收到子窗口发送的信息时触发，并将传递来的数据封装在该事件的参数e中。

在子窗口中，定义以下代码：

window.opener.postMessage('Hello, parent', '*');

该代码用于向父窗口发送数据，其中'Hello, parent'是需要传递的数据，'*'表示接收方为任意窗口。

当子窗口调用该代码时，将向父窗口发送数据'Hello, parent'。父窗口接收到数据后，将其打印输出到浏览器控制台。

以上是实现“JS简单实现父子窗口传值功能示例【未使用iframe框架】”的完整攻略。通过采用不同的方案，我们可以实现父窗口向子窗口传递数据，以及子窗口向父窗口传递数据，给我们带来了很多便利。