Как отправить сообщение в iFrame? - PullRequest
Новая
       101

Как отправить сообщение в iFrame?

0 голосов
/ 01 мая 2020

Я разрабатываю расширение Chrome для использования со своим собственным веб-приложением, обрабатывающим веб-страницы (включая междоменные), загруженные в 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>

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.

Что не так с моим сценарием и как решить проблему?

1 Ответ

1 голос
/ 01 мая 2020

window.postMessage в вашем веб-приложении отправляет в основной документ window, а не в iframe.

Укажите объект окна iframe: 

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

В качестве альтернативы, вы можете переключиться к более безопасному внешнему сообщению обмену сообщениями.

...