Wie verständigen sich Dokumente (im iframe) auf einer Webseite oder gar von Tab zu Tab im Browser?

[Rolf B]

Hallo Linuchs,

dieses ganze Geschwätz zwischen Parent und IFrame setzt voraus, dass die "fremde" Seite nicht wirklich fremd ist. Ein Bild von dort zu laden, dass Dir die Höhe verrät, ist ja auch eine Form der Kommunikation.

D.h. diese "fremde Seite", die deinen iframe einbettet, ist so fremd nicht. Du kannst mir dem Kollegen, der diese Seite betreut, reden. Und dieser fremde Kollege ist bereit, JavaScript einzubinden, andernfalls könnte er ja deinen iframe nicht passend resizen.

Das heißt aber auch, dass dieser Kollege bereit sein dürfte, einen Eventhandler auf "message" zu registrieren. Dorthin schickst Du aus dem iframe eine Message mit der benötigten Höhe, wenn der iframe geladen ist. Wie Du an die Höhe herankommst, ist ein anderes Problem, aber das kannst Du ja offenbar lösen, weil Du das Bild fabrizieren kannst.

Für die Kommunikation ist kaum was zu tun:

Im iframe:

   let width = ...;
   let height = ...;
   window.parent.postMessage({ width, height }, "*");

Als Sender solltest Du keinen Origin angeben, denn Du möchtest ja nicht pro Host-Seite eine andere Version deines Kalenders haben, die sich nur im Origin unterscheidet. Du möchtest deinen Größenbedarf jedem mitteilen, der Dich einbindet.

Und beim Einbettenden:

window.addEventListener("message", function(messageEvent) {
   if (messageEvent.origin == "https://remso.eu") {
      let size = message.data;
      kalender.style = `width: ${size.width}px; ${size.height}px;`;
   }
});

Den Origin-String wirst Du anpassen müssen. Im Zweifel ausprobieren. Aber abfragen sollte man ihn, damit nicht irgendein bösartiges Script was posten kann, und damit klar ist, welches Format die gesendeten Daten haben.

Die Ablage in der size-Variablen dient vor allem dazu, dass die Zeilenbreit eim Forum nicht zu groß wird…

Und ob Du die iframe-Größe nun so oder anders setzen willst, ist ebenfalls Objekt der Spekulation 😀

Rolf