JavaScript 执行父页面的 JS
流程图
pie
title JavaScript 执行父页面的 JS
"小白" : 开发者
"父页面" : 父页面
步骤说明
| 步骤 | 描述 |
|---|---|
| 步骤1 | 小白在子页面中添加一个按钮，并编写 JavaScript 代码 |
| 步骤2 | 小白在子页面中通过 window.opener 获取父页面的引用 |
| 步骤3 | 小白使用 postMessage 方法向父页面发送消息 |
| 步骤4 | 父页面接收到消息后执行相应的 JavaScript 代码 |
代码示例
子页面代码
// 步骤1：在子页面中添加一个按钮，并编写 JavaScript 代码
const button = document.createElement("button");
button.innerText = "执行父页面的JS";
button.addEventListener("click", () => {
// 步骤2：通过 `window.opener` 获取父页面的引用
const parentWindow = window.opener;
// 步骤3：使用 `postMessage` 方法向父页面发送消息
parentWindow.postMessage("执行父页面的JS", "*");
});
document.body.appendChild(button);
父页面代码
// 步骤4：父页面接收到消息后执行相应的 JavaScript 代码
window.addEventListener("message", (event) => {
if (event.origin !== window.location.origin) return; // 防止跨域攻击
if (event.data === "执行父页面的JS") {
// 在这里写入需要执行的父页面的 JavaScript 代码
alert("父页面的JS已执行");
}
});
代码说明
在子页面中，我们首先创建了一个按钮，并通过 addEventListener 方法给按钮绑定了一个点击事件。在点击事件中，我们通过 window.opener 获取到了父页面的引用，并使用 postMessage 方法向父页面发送了一条消息。
在父页面中，我们使用 window.addEventListener 方法来监听消息事件。当接收到消息后，我们首先通过 event.origin 来验证消息的来源是否为当前页面的同源域名，以防止跨域攻击。然后，我们判断接收到的消息内容是否为我们预期的内容，如果是，则执行相应的 JavaScript 代码，例如弹窗提示。
这样，当子页面中的按钮被点击时，父页面就会执行相应的 JavaScript 代码。
希望本文对你有所帮助，有任何问题欢迎随时提问。
