{"id":1507,"date":"2021-03-19T16:34:38","date_gmt":"2021-03-19T15:34:38","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1507"},"modified":"2021-03-19T16:34:38","modified_gmt":"2021-03-19T15:34:38","slug":"responsiver-iframe-mit-javascript","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1507\/responsiver-iframe-mit-javascript\/","title":{"rendered":"Responsiver Iframe mit JavaScript"},"content":{"rendered":"<p>Wie mache ich einen Iframe responsiv, dass er sich automatisch in der H\u00f6he anpasst.<\/p>\n<p><!--more--><\/p>\n<p>Iframes lassen sich der Breite mit einer Prozentangabe versehen, aber die H\u00f6he l\u00e4sst sich nur in Pixel festlegen. Wenn man die genaue H\u00f6he nicht wei\u00df, kann es daher sein, dass die H\u00f6he nicht passt und der Nutzer scrollen muss.<\/p>\n<p>Abhilfe schafft etwas Java-Script. Zuerst definieren wir den Iframe:<\/p>\n<pre>\r\n&lt;iframe id=&quot;iframe&quot; width=&quot;100%&quot; height=&quot;200&quot; src=&quot;frame.html&quot;\r\n        frameborder=&quot;0&quot; scrolling=&quot;auto&quot; onload=&quot;setIframeHeight()&quot;&gt;&lt;\/iframe&gt;<\/pre>\n<p>Dieser ruft nach dem Laden der Unterseite die Funktion &#8222;setIframeHeight&#8220; auf.<\/p>\n<pre>\r\nfunction setIframeHeight() {\r\n    let iFrameID = document.getElementById('iframe');\r\n    if(iFrameID) {\r\n        try {\r\n            let height = iFrameID.contentWindow.document.body.scrollHeight + 50;\r\n            iFrameID.height = height + &quot;px&quot;;\r\n        } catch (e) { }\r\n    }\r\n}<\/pre>\n<p>Die Funktion ermittelt nach dem Laden die H\u00f6he. Meist passt die H\u00f6he noch nicht ganz, daher die &#8222;+ 50&#8220;. Hier kann man noch etwas nachjustieren, wenn doch ein Scrollbalken erscheint.<\/p>\n<h2>Einschr\u00e4nkung von externen Webseiten<\/h2>\n<p>Probleme gibt es beim Laden von externen Seiten, hier wird eine Exception erzeugt, da das Java-Script keinen Zugriff auf die externe Webseite hat, aus Sicherheitsgr\u00fcnden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/03\/iframe_resp_1.png\" alt=\"\" width=\"1174\" height=\"87\" class=\"alignnone size-full wp-image-1508\" srcset=\"\/wp-content\/uploads\/2021\/03\/iframe_resp_1.png 1174w, \/wp-content\/uploads\/2021\/03\/iframe_resp_1-300x22.png 300w, \/wp-content\/uploads\/2021\/03\/iframe_resp_1-1024x76.png 1024w, \/wp-content\/uploads\/2021\/03\/iframe_resp_1-768x57.png 768w\" sizes=\"auto, (max-width: 1174px) 100vw, 1174px\" \/><\/p>\n<pre>\r\nDOMException: Blocked a frame with origin \"http:\/\/localhost:63342\" from accessing a cross-origin frame. at setIframeHeight (http:\/\/localhost:63342\/iframe\/index.html:18:49) at HTMLIFrameElement.onload (http:\/\/localhost:63342\/iframe\/index.html:27:69) {stack: Accessor, code: 18, name: \"SecurityError\", message: \"Blocked a frame with origin \"http:\/\/localhost:63342\" from accessing a cross-origin frame.\"}\r\n<\/pre>\n<p>Tritt die Exception auf, bleibt die H\u00f6he unver\u00e4ndert. <\/p>","protected":false},"excerpt":{"rendered":"<p>Wie mache ich einen Iframe responsiv, dass er sich automatisch in der H\u00f6he anpasst.<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[4,44],"class_list":["post-1507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1507","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=1507"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1507\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}