{"id":5237,"date":"2023-07-18T21:16:54","date_gmt":"2023-07-18T19:16:54","guid":{"rendered":"https:\/\/ekiwi.de\/?p=5237"},"modified":"2023-07-18T21:16:54","modified_gmt":"2023-07-18T19:16:54","slug":"iframe-mit-java-script-dynamisch-wechseln","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/5237\/iframe-mit-java-script-dynamisch-wechseln\/","title":{"rendered":"Iframe mit Java-Script dynamisch wechseln"},"content":{"rendered":"

Wie kann ich mit Java-Script einen anderen Iframe-Inhalt laden?<\/p>\n

<\/p>\n

In diesem Artikel wollen wir uns mal anschauen, wie wir mittels Knopfdruck in einer HTML-Seite den Iframe austauschen k\u00f6nnen. Hier wollen wir zwischen zwei Formularen hin und her schalten, ein Design-Wechsel zwischen dunklem und hellem Theme.<\/p>\n

Unser Projekt sieht so aus:<\/p>\n

\"\"<\/p>\n

Wir haben unsere Hauptdatei, diese enth\u00e4lt den folgenden Code:<\/p>\n

<iframe id="myframe" src="light.html" width="500" height="500"><\/iframe>\r\n\r\n<button onclick="changeSrc('dark')">Dark Mode<\/button>\r\n<button onclick="changeSrc('light')">Light Mode<\/button>\r\n\r\n<script>\r\n    function changeSrc(mode) {\r\n        document.getElementById("myframe").src = mode + ".html";\r\n    }\r\n<\/script>\r\n<\/pre>\n
Gehen wir dies durch. Wir haben hier unseren Iframe, dieser zeigt standardm\u00e4\u00dfig das helle Theme an. Dann zwei Buttons, welche die Java-Script-Funktion aufrufen. In der Funktion setzen wir, anhand des \u00dcbergabe-Parameters die neue Datei.<\/p>\n
Auf dem eigenen Webspace funktioniert dies in der Regel ohne Probleme. Externe URLs lassen sich einbinden, allerdings kann der externe Server entscheiden, ob es erlaubt ist. Falls nicht wird die Anzeige blockiert.<\/p>\n
Hier kann das Beispiel online angeschaut werden.<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Wie kann ich mit Java-Script einen anderen Iframe-Inhalt laden?<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[],"class_list":["post-5237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5237","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=5237"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5237\/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=5237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=5237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=5237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}