{"id":412,"date":"2019-02-10T17:57:24","date_gmt":"2019-02-10T16:57:24","guid":{"rendered":"https:\/\/ekiwi.de\/?p=412"},"modified":"2021-02-09T10:07:09","modified_gmt":"2021-02-09T09:07:09","slug":"iframe-mit-100-hoehe","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/412\/iframe-mit-100-hoehe\/","title":{"rendered":"Iframe mit 100% H\u00f6he"},"content":{"rendered":"

Iframes sind eine praktische Sache zum Einbinden von HTML-Dateien in eine Webseite. Probleme gibt es aber bei responsiven Webseiten.<\/p>\n

<\/p>\n

Die Breite kann man mit einer Prozentangabe versehen. Diese passt sich damit automatisch dem verf\u00fcgbaren Platz an. Bei der H\u00f6he ist es schwieriger. Diese wird absolut in Pixeln angegeben.<\/p>\n

Das Problem ist, dass die Webseite ja nicht wei\u00df, wie hoch der Inhalt des Iframes ist. Dies ist erst nach dem dem vollst\u00e4ndigen Laden des Iframes ersichtlich. Abhilfe kann man mit Java-Script schaffen:<\/p>\n

<script>\r\nfunction setIframeHeight() {\r\n  var iFrameID = document.getElementById('iframe');\r\n  if(iFrameID) {\r\n    iFrameID.height = "";\r\n    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";\r\n  }\r\n}\r\n<\/script>\r\n<iframe src="formular.html" name="iframe" id="iframe" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="400" width="100%" onload="setIframeHeight();">\r\n<\/iframe><\/pre>\n
Der Java-Script-Code wird aufgerufen, sobald das Laden des Iframes abgeschlossen ist. Es wird die aktuelle H\u00f6he des Inhaltes ermittelt und die H\u00f6he des Iframes angepasst.<\/p>\n
Die L\u00f6sung eignet sich eher f\u00fcr das Einbinden von lokalen Dateien, welche schnell geladen werden. Werden gr\u00f6\u00dfere Datenmengen geladen, dauert es bis zur Gr\u00f6\u00dfen\u00e4nderung so lange, bis der Iframe vollst\u00e4ndig geladen ist.<\/p>\n
Wer den Code nutzen m\u00f6chte, kann auch unseren kostenlosen IFrame-Generator<\/a> verwenden.<\/p>\n
Externe URLs<\/h2>\n
Noch ein kleiner Hinweis, das Script funktioniert nicht bei externen URLs im iFrame. Aus Sicherheitsgr\u00fcnden blockieren Browser das Auslesen von Informationen.<\/p>\n
\"\"<\/p>","protected":false},"excerpt":{"rendered":"
Iframes sind eine praktische Sache zum Einbinden von HTML-Dateien in eine Webseite. Probleme gibt es aber bei responsiven Webseiten.<\/p>\n","protected":false},"author":1,"featured_media":218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[4,20,50],"class_list":["post-412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-html","tag-iframe","tag-java-script"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/412","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=412"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/218"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}