如何将消息发布到 iFrame 中?

Kos*_*nko 10 javascript iframe postmessage google-chrome-extension content-script

我正在开发一个 Chrome 扩展程序以与我自己的 Web 应用程序一起使用,处理加载到iFrame我的应用程序主页上的网页(包括跨域页面)。所以我必须发送消息,包含要处理的页面的 URL,从我的主页面到内容脚本,注入目标iFrame以访问已处理页面的窗口。

我尝试实施这里描述的方法。以下是所有涉及的文件的基本部分:

index.html

...
<head>
    ...
    <script type="text/javascript" src="base.js"></script>
</head>
<body>
    <div>
        <input type="text" id="page_url">&nbsp;<input type="button" id="get_page" value="Get page">
    </div>
    <iframe id="cross_domain_page" src=""></iframe>
</body>
Run Code Online (Sandbox Code Playgroud)

base.js

(function() {
    "use strict";
    function pageProcessing() {
        let urlButton = window.document.getElementById("get_page");
        urlButton.addEventListener("click", () => {
            let url = window.document.getElementById("page_url").value;
            window.postMessage(
                {
                    sender: "get_page_button1",
                    message: url
                },
                "*"
            );
            window.postMessage(
                {
                    sender: "get_page_button2",
                    message: url
                },
                "*"
            );
        });
    }
    window.document.addEventListener('readystatechange', () => {
            if (window.document.readyState == 'complete') {
                pageProcessing();
            }
        }
    );
})();
Run Code Online (Sandbox Code Playgroud)

manifest.json

{
  "manifest_version": 2,
  "name": "GetPage",
  "version": "0.1",
  "content_scripts": [
    { "js": ["main.js"], "matches": ["<all_urls>"] },
    { "js": ["frame.js"], "matches": ["<all_urls>"], "all_frames": true, "match_about_blank": true }
  ],
  "permissions": ["activeTab"]
}
Run Code Online (Sandbox Code Playgroud)

main.js

(function() {
    "use strict";
    window.isTop = true;
})();
Run Code Online (Sandbox Code Playgroud)

frame.js

(function() {
    "use strict";
    window.addEventListener("message", (event) => {
        if (event.data &&
            event.data.sender == "get_page_button1") {
            if (window.isTop) {
                alert("Main window alert");
            } else {
                alert("Frame window alert 1");
            }
        }
    });
    if (!window.isTop) {
        window.addEventListener("message", (event) => {
            if (event.data &&
                event.data.sender == "get_page_button2") {
                alert("Frame window alert 2");
            }
        });
    }
})();
Run Code Online (Sandbox Code Playgroud)

问题是,当我单击“get_page”按钮时,我看到的唯一警报是主窗口警报。至于我的理解,这意味着从主窗口发布的消息没有到达内容脚本,注入iFrame.

我的脚本有什么问题以及如何解决问题?

wOx*_*xOm 17

web 应用程序中的 window.postMessage 发送到主文档的window,而不是 iframe 的。

指定 iframe 的 window 对象:

document.getElementById('cross_domain_page').contentWindow.postMessage(.......)
Run Code Online (Sandbox Code Playgroud)

或者,您可以切换到更安全的externally_connectable消息传递。

  • 从您的回答中是否可以看出,要将消息从“iFrame”发送回主窗口,我必须使用类似“if (!window.isTop) { ... window.parent.postMessage(...); ”的内容 }`? (3认同)
  • postMessage 可以与跨域 iframe 一起使用吗?我无法访问加载跨域页面的 iframe 的 contentWindow。 (3认同)
  • postMessage 设计用于跨域 iframe/windows。使用 [MCVE](/help/mcve) 提出新问题。 (2认同)
  • 这对我不起作用。iframe 内的侦听器未接收消息。 (2认同)
  • 不要在评论中发表“我也是”。使用适当的 [MCVE](/help/mcve) 提出一个新问题。 (2认同)