Question

我在索引文件中有一个iframe，我想从iframe中获取所有html并将其存储在变量中。 iframe内部加载的内容来自另一个域。因此，我正在尝试使用javascript和postMessage和一个eventListener实现此目的。到目前为止，这是我的代码。我有一个调用click方法的按钮。

index.vue

    click() {
        let iframe = document.getElementById('the_iframe');
        iframe.contentWindow.postMessage('Dont really know what to send here', '*');
        this.test();
    },
    test() {
        window.addEventListener('message', function(event) {
            //Just a test, as the it wont go in the else
            console.log(event.currentTarget.document);
            if (event.origin !== 'http://testdomain') {
                console.log('ERROR');
            } else {
                console.log(event.currentTarget.document);
                const html = event.currentTarget.document); 
                //This however doesnt work. The value is not stored in the const
                console.log(event.currentTarget.document);
            }
        });
    }

当我控制台登录event.currentTarget.document时，它会打印出网站的整个html结构，包括父页面（索引）。我的问题是：如何获取索引文件中iframe的所有html？以及如何将其存储在变量中？

Answer 1

window.addEventListener('message',代码需要出现在父级文档中。

它需要自动运行。它不应在函数内部。

（您可以将其放入函数中，但仍然需要先运行它，在这种情况下没有理由）。

对postMessage的调用必须是文档中位于框架内中的in脚本，并且需要将所需的数据发布到父级。

例如

window.parent.postMessage({ html: document.body.innerHTML }, '*');

现在，如果您想触发HTML来响应单击事件，则两个文档都需要window.addEventListener('message',和postMessage调用：

父窗口具有一个消息侦听器，用于侦听其中包含HTML的消息
父窗口具有单击事件处理程序，该事件处理程序调用{{1}}并请求HTML
iframe文档具有消息侦听器，该消息侦听器侦听带有HTML请求的消息，然后调用iframe.contentWindow.postMessage

从跨域iframe窗口获取HTML

1 个答案: