Получение html из междоменного окна iframe

Question

У меня есть iframe в моем индексном файле, и я хочу получить весь html из iframe и сохранить его в переменной.Содержимое, загруженное внутри 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-структуру сайта, включая родительскую страницу (индекс).Мой вопрос: как мне извлечь все HTML только из iframe внутри моего файла индекса?и как мне сохранить его в переменной?

Answer 1

Код window.addEventListener('message', должен появиться в документе parent .

Должен запускаться автоматически.Это не должно быть внутри функции.

(Вы можете поместить его в функцию, но она по-прежнему должна запускаться первой, и в этом случае нет причин для этого).

---

вызов postMessage должен быть внутри сценария в документе внутри фрейма , и он должен отправить данные, которые вы хотите, к родителю.

например,

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

---

Теперь, если вы хотите инициировать выборку HTML в ответ на событие щелчка, тогда обоим документам нужно window.addEventListener('message', и postMessage вызов:

1. В родительском окне есть прослушиватель сообщений, который прослушивает сообщение с HTML-кодом
2. В родительском окне есть обработчик событий щелчка, который вызывает iframe.contentWindow.postMessage с запросом HTML
3. IframeВ документе есть прослушиватель сообщений, который прослушивает сообщение с запросом HTML, а затем вызывает window.parent.postMessage({ html: document.body.innerHTML }, '*');