JavaScript 执行父页面的 JS

流程图

pie
    title JavaScript 执行父页面的 JS
    "小白" : 开发者
    "父页面" : 父页面

步骤说明

代码示例

子页面代码

// 步骤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 代码。

希望本文对你有所帮助，有任何问题欢迎随时提问。