如何将postMessage发送到iFrame？

Question

如何将postMessage发送到iFrame？

javascriptiframegoogle-chrome-extensionpostmessagecontent-script

46

我正在开发一款Chrome扩展程序，用于处理加载到我的应用程序主页面上的iframe中（包括跨域页面）的网页。因此，我需要从我的主页面向注入到目标iframe中的内容脚本发送包含要处理页面的URL的消息，以便访问已处理页面的窗口。

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

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>

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();
            }
        }
    );
})();

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"]
}

main.js:

(function() {
    "use strict";
    window.isTop = true;
})();

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");
            }
        });
    }
})();

问题在于当我点击“get_page”按钮时，我只能看到主窗口的警报。据我理解，这意味着从主窗口发布的消息未到达注入到iFrame中的内容脚本。

我的脚本有什么问题，如何解决问题？

- Kostiantyn Ivashchenko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wOxxOm · Accepted Answer

在您的Web应用程序中使用window.postMessage方法时，它会发送到主文档的window，而不是iframe的窗口。

请指定iframe的窗口对象：

document.getElementById('cross_domain_page').contentWindow.postMessage(.......)

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