Uncaught TypeError: невозможно прочитать свойства null (чтение «postMessage»), проблема с фреймом из разных источников ⇐ Jquery

[Anonymous]

Я уже провел исследование и думаю, что дошел до цели, но просто не могу понять, почему я продолжаю получать эту ошибку.
У меня есть два сайта с разными ДОМЕНАМИ, которыми я владею, и я скажу, что могу вставлять скрипты с обеих сторон.
Mainwebsite.com содержит iframe от Secondsite.com.
SecondSite.com имеет динамический контент, который может иметь длинный контент и когда я загружаю его на Mainwebsite.com, у меня возникает проблема с прокруткой. Mainwebsite.com должен автоматически регулировать высоту iframe, но у меня возникла проблема с перекрестным происхождением.
Вот что я получил:

Код: Выделить всё

Mainwebsite.com


const frame = document.getElementById('secondSiteContainer');
frame.postMessage(
"message",
"http://secondsite.com",
);

frame.postMessage("hello there!", "http://secondsite.com");
window.addEventListener(
"message",
(event) => {
if (event.origin !== "http://secondsite.com") return;
},
false,
);


http://secondsite.com

secondsite.com

$( document ).ready(function() {
console.log( "ready!" );
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "mainsite.com") return;

event.source.postMessage(
"hello from 2nd site!",
event.origin,
);
});
});

и теперь я получил сообщение об ошибке: Uncaught TypeError: невозможно прочитать свойства null (чтение «postMessage»)

Подробнее здесь: https://stackoverflow.com/questions/769 ... ssage-cros