{"id":2440,"date":"2022-03-06T11:46:40","date_gmt":"2022-03-06T10:46:40","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2440"},"modified":"2022-03-06T12:21:51","modified_gmt":"2022-03-06T11:21:51","slug":"kommunikation-zwischen-iframe-und-parent-sweet-alerts-im-parent-frame-aufrufen","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2440\/kommunikation-zwischen-iframe-und-parent-sweet-alerts-im-parent-frame-aufrufen\/","title":{"rendered":"Kommunikation zwischen Iframe und Parent: Sweet Alerts im Parent Frame aufrufen"},"content":{"rendered":"<p>Funktionen im Parent aufrufen, aus einem Iframe, am Bespiel von SweetAlerts.<\/p>\n<p><!--more--><\/p>\n<p>Mit der <a href=\"https:\/\/ekiwi.de\/index.php\/845\/sweetalert2-schoene-dialoge-in-javascript\/\" target=\"_blank\" rel=\"noopener\">SweetAlert Bibliothek<\/a> lassen sich einfach schicke Dialoge in Java-Script realisieren. Die Darstellung kommt innerhalb von langen Iframes aber an ihre Grenzen und liefert einige unsch\u00f6ne Effekte.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/odC75DoJ7A8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>So bezieht sich die Position normalerweise auf den aktuellen Bildschirm und der Dialog wird beispielsweise zentriert angezeigt. Im Iframe kann dies aber bedeuten, dass dies au\u00dferhalb des unsichtbaren Bereichs dargestellt werden. Auch unsch\u00f6ne automatische Scrolling-Effekte treten auf.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/03\/iframe_1.png\" alt=\"\" width=\"688\" height=\"243\" class=\"alignnone size-full wp-image-2441\" srcset=\"\/wp-content\/uploads\/2022\/03\/iframe_1.png 688w, \/wp-content\/uploads\/2022\/03\/iframe_1-300x106.png 300w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/p>\n<p>Meine Idee war daher, die Benachrichtigung in der \u00fcbergeordneten Seite darzustellen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/03\/iframe_2.png\" alt=\"\" width=\"908\" height=\"621\" class=\"alignnone size-full wp-image-2442\" srcset=\"\/wp-content\/uploads\/2022\/03\/iframe_2.png 908w, \/wp-content\/uploads\/2022\/03\/iframe_2-300x205.png 300w, \/wp-content\/uploads\/2022\/03\/iframe_2-768x525.png 768w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/p>\n<p>Doch wie rufen wir eine Funktion aus dem Iframe in der \u00fcbergeordneten Seite auf? Hier kommt die Funktion &#8222;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/postMessage\" target=\"_blank\" rel=\"noopener\">postMessage<\/a>&#8220; ins Spiel. Dieser erlaubt uns eine Nachricht aus dem Iframe heraus zu senden.<\/p>\n<p>Hier unser Beispiel:<\/p>\n<pre>\r\n&lt;script&gt;\r\n    function dialogFrame(title, message) {\r\n        parent.postMessage({ id: 'openAlert', title: title, message: message}, &quot;*&quot;);\r\n    }\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Als Parameter k\u00f6nnen wir einen String oder auch komplexe Objekte \u00fcbergeben. In unserem Beispiel \u00fcbergeben wir eine ID, den Titel des Dialogs und einen Text.<\/p>\n<p>In der HTML-Datei, welche unseren Iframe enth\u00e4lt, m\u00fcssen wir nun noch die Nachricht registrieren:<\/p>\n<pre>window.addEventListener(&quot;message&quot;, function(event) {\r\n    if(event.data.id === &quot;openAlert&quot;);{\r\n        openAlert(event.data.title, event.data.message);\r\n    }\r\n});<\/pre>\n<p>Hier lesen wir die ID aus und rufen die &#8222;openAlert&#8220; Funktion auf, welche unseren Titel und Nachricht \u00fcbergeben bekommt.<\/p>\n<p>Diese Funktion \u00f6ffnet anschlie\u00dfend den SweetAlert im \u00fcbergeordneten Fenster. Durch die Parameter k\u00f6nnen wir damit den Titel und auch den Text der Benachrichtigung steuern.<\/p>\n<pre>function openAlert(title, message) {\r\n    Swal.fire({\r\n        title: title,\r\n        text: message,\r\n        position: 'middle',\r\n        confirmButtonText: 'OK',\r\n    });\r\n}<\/pre>\n<p><a href=\"\/wp-content\/uploads\/2022\/03\/swal_iframe.zip\">Das Beispiel gibt es hier zum Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Funktionen im Parent aufrufen, aus einem Iframe, am Bespiel von SweetAlerts.<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[72,44,172],"class_list":["post-2440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-anleitung","tag-javascript","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2440"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2440\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}