{"id":76,"date":"2018-03-18T15:49:20","date_gmt":"2018-03-18T14:49:20","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=76"},"modified":"2018-03-18T15:49:20","modified_gmt":"2018-03-18T14:49:20","slug":"responsiver-iframe","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/76\/responsiver-iframe\/","title":{"rendered":"Responsiver IFrame"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/76\/responsiver-iframe\/#Problem\" >Problem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/76\/responsiver-iframe\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/76\/responsiver-iframe\/#Loesung\" >L\u00f6sung<\/a><\/li><\/ul><\/nav><\/div>\n<p>Iframes eignen sich bestens um Inhalte in andere HTML-Dateien einzubinden. Z.B. l\u00e4sst sich so ein <a href=\"https:\/\/da-software.de\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener\">HTML-Formular erstellen<\/a> und in eine bestehende Webseite einbinden. Allerdings gibt es ein Problem: der Iframe ist standardm\u00e4\u00dfig wenig responsiv, d.h. es kann zu Problemen bei der Darstellung auf mobilen Ger\u00e4ten kommen. Je nach Einstellung werden Scrollbalken angezeigt oder der Inhalt abgeschnitten. Wichtig ist, dass der Inhalt des IFrames ebenfalls responsiv ist.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Problem\"><\/span>Problem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In unserem Beispiel wollen wir die Datei <code>formular.html<\/code> in eine HTML-Datei einbinden. Der Code sieht so aus:<\/p>\n<pre>&lt;iframe id=\"iframe\" width=\"100%\" height=\"200\" src=\"formular.html\" \r\nframeborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>Die Breite ist in Prozent angegeben. Dies passt soweit. Auf kleineren Bildschirmen passt sich der Iframe automatisch in der Breite an. Das Problem ist aber die H\u00f6he. Wird der Iframe schmaler, passt sich der Inhalt im Iframe ebenfalls an und wird dann meist l\u00e4nger:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-77\" src=\"\/wp-content\/uploads\/2018\/03\/resp_iframe1.png\" alt=\"\" width=\"353\" height=\"523\" srcset=\"\/wp-content\/uploads\/2018\/03\/resp_iframe1.png 353w, \/wp-content\/uploads\/2018\/03\/resp_iframe1-202x300.png 202w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/p>\n<p>Im Beispiel werden Scrollbalken sichtbar und das Formular wird nicht mehr komplett angezeigt. Es m\u00fcsste sich also neben der Breite, auch die H\u00f6he automatisch anpassen. Die H\u00f6he kann allerdings nicht in Prozent angegeben werden. Die Angabe ist immer Pixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-78\" src=\"\/wp-content\/uploads\/2018\/03\/resp_iframe_screen.gif\" alt=\"\" width=\"450\" height=\"254\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/NsLYALHIAy4\" allowfullscreen=\"allowfullscreen\" width=\"640\" height=\"360\" frameborder=\"0\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Loesung\"><\/span>L\u00f6sung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die L\u00f6sung ist nun, die H\u00f6he des Iframes immer dem Inhalt anzupassen. Hier hilft uns etwas Java-Script weiter, welches die aktuelle H\u00f6he des Iframe-Inhaltes berechnet und die Iframe H\u00f6he anpasst:<\/p>\n<pre>&lt;script&gt;\r\nfunction setIframeHeight() {\r\n\tvar ifrm = document.getElementById(\"iframe\");\r\n\tvar doc = ifrm.contentDocument? ifrm.contentDocument: \r\n\t\t\tifrm.contentWindow.document;\r\n\tifrm.style.visibility = 'hidden';\r\n\tifrm.style.height = \"10px\";\r\n\r\n\tdoc = doc || document;\r\n\tvar body = doc.body, html = doc.documentElement;\r\n\tvar height = Math.max( body.scrollHeight, body.offsetHeight, \r\n\t\t\thtml.clientHeight, html.scrollHeight, html.offsetHeight );\r\n\r\n\r\n\tifrm.style.height = height + 50 + \"px\";\r\n\tifrm.style.visibility = 'visible';\r\n\t}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Den Code f\u00fcgen wir direkt vor dem Iframe-Code ein. Zum Code selbst. Hier wird zuerst eine Referenz auf den Iframe geholt (wichtig ist hier, dass der Iframe die <code>id=\"iframe\"<\/code> hat. Ansonsten muss der Code entsprechend angepasst werden.<\/p>\n<p>Im Code wird anschlie\u00dfend die H\u00f6he des Iframe-Inhaltes ermittelt und diese dann im Iframe zugewiesen. Damit die H\u00f6he automatisch angepasst wird, muss der Code noch aufgerufen werden. Dies geschieht, in dem wir den Event-Handler <code>onload=\"setIframeHeight();\"<\/code> hinzuf\u00fcgen:<\/p>\n<pre>&lt;iframe id=\"iframe\" width=\"100%\" height=\"400\" src=\"formular.html\" frameborder=\"0\"\r\nallowfullscreen onload=\"setIframeHeight();\"&gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>Im Ergebnis wir das Formular nun ohne Scrollbalken dargestellt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-79\" src=\"\/wp-content\/uploads\/2018\/03\/resp_iframe2.png\" alt=\"\" width=\"250\" height=\"393\" srcset=\"\/wp-content\/uploads\/2018\/03\/resp_iframe2.png 250w, \/wp-content\/uploads\/2018\/03\/resp_iframe2-191x300.png 191w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/p>\n<p>Die Feinjustierung kann man noch an dieser Zeile vornehmen:<\/p>\n<pre>ifrm.style.height = height + 50 + \"px\";<\/pre>\n<p>Passt die ermittelte H\u00f6he nicht, kann man hier die 50 erh\u00f6hen oder verkleinern. Dieser Wert wird in der H\u00f6he immer draufgeschlagen.<\/p>\n<p>Auch beim Vergr\u00f6\u00dfern oder Verkleinern des Browserfensters erfolgt nun eine automatische Anpassung. Somit haben wir den Iframe mit einfachen Mitteln responsiv gemacht.<\/p>\n<p><a class=\"fasc-button fasc-size-medium fasc-type-flat fasc-ico-before dashicons-admin-site\" style=\"background-color: #33809e; color: #ffffff;\" href=\"\/wp-custom\/responsive_iframe\/resp.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Iframes eignen sich bestens um Inhalte in andere HTML-Dateien einzubinden. Z.B. l\u00e4sst sich so ein HTML-Formular erstellen und in eine<\/p>\n","protected":false},"author":1,"featured_media":80,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[4,20,21],"class_list":["post-76","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-html","tag-iframe","tag-responsive"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/76","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=76"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}