Javascript Set Iframe Src

Michael Zippo 04.11.2021

Das HTML-iframe-Tag bettet ein Webdokument in eine Webseite ein. Ein eingebettetes Dokument kann ein PDF, eine Webseite oder ein anderes Asset sein. Das src-Attribut definiert den Speicherort der eingebetteten Ressource.

Sie k√∂nnen den Inhalt eines Webdokuments einbetten. B. ein PDF oder eine Karte von Google Maps, auf eine andere Seite mit HTML.

Hier kommt der HTML-</em> ins Spiel. Der HTML-<em>Das <iframe></em>-Tag wird verwendet, um externe Objekte wie andere Webseiten in eine einzelne Webseite einzubetten. In diesem Tutorial wird anhand von Beispielen erl√§utert, wie Sie mithilfe des HTML-Tags <em><iframe></em> Webressourcen in eine Webseite einbetten.</p> <h2>HTML-iframe</h2> <p>HTML-Iframes oder Inline-Frames zeigen externe Webdokumente auf einer Seite an. Sie k√∂nnen Karten, PDFs, Videos oder andere Ressourcen mit dem <iframe> HTML-Tag.</p> <p>Der in einem Inline-Frame gespeicherte Code ist unabh√§ngig vom Rest einer Webseite. Alle Stile oder JavaScript, die auf Ihre Webseite angewendet werden, werden nicht innerhalb des iframes angewendet.</p> <p>Hier ist die Syntax fur das HTML-<em><iframe></em>-Tag:</p> <p>Das Tag <em><iframe></em> wird verwendet, um einen iframe zu erstellen. Wir haben ein iframe-Attribut <em>src</em> angegeben. Das Attribut enth√§lt die Position der HTML-Elemente, die wir in unsere Webseite einbetten m√∂chten. Dies sollte eine <a href="/url-vs-uri/">HTML-URL</a> sein.</p> <h2>iframe HTML-Code-Beispiel</h2> <p>Lassen Sie uns ein Beispiel durchgehen um herauszufinden, wie das Tag <em><iframe></em> funktioniert.</p></div> </div> <p>Angenommen, wir bauen ein Website fur eine lokale historische Gesellschaft in Washington, DC. Sie wollen, dass wir eine Seite mit einem eingebetteten Video der Khan Academy zur Geburt der US-Verfassung erstellen. Diese Seite ist empfohlenes Material fur alle, die daran interessiert sind, der Gesellschaft beizutreten. Wir k√∂nnten den folgenden Code verwenden, um das Video in unsere Website einzubetten:</p> <p>Unser Code gibt Folgendes zuruck:</p> </a> </div> <figure class = "wp-Block-Bild"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" alt = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" ></figure> <p>Wir haben ein <em><iframe></em>-Element verwendet, um eine externe Webressource in unsere Webseite einzubetten. Die von uns eingebettete Webressource ist der Link "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener">https://www.youtube.com/embed/Rk8dCnKIfP4</a>‚". Dies weist auf die Video, das die historische Gesellschaft auf ihrer Website zeigen m√∂chte.</p> <h4>HTML-Iframe-H√∂he und -Breite</h4> <p>Die H√∂hen- und Breitenattribute werden verwendet, um die Gr√∂√üe von ein iframe. Angenommen, die √∂rtliche historische Gesellschaft von Washington DC m√∂chte, dass wir das Video auf ihrer Website vergr√∂√üern.</p> <p>Wir werden die Breite des YouTube-Videos auf 500 Pixel und die H√∂he auf 300 Pixel festlegen:</p> <p>Unser Code gibt Folgendes zuruck:</p> <figure class="wp-block-image"><img class="lazyload" data-src="https: //lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ"alt = "YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ"> </ figure> <p>unser Embedded Video 500 Pixel ist nun breit und 300 Pixel auf unserem HTML-Dokument hoch. Dadurch k√∂nnen Nutzer unser Video auf der Website leichter sehen.</p><p>Alternativ k√∂nnten wir die <a href="/css-height-and-width/">Breite und H√∂he des iframe-Tags festlegen CSS verwenden</a>. Da HTML jedoch H√∂hen- und Gewichtsattribute unterstutzt, ist dies nicht erforderlich.</p> <h2>HTML-iframe-Rahmen entfernen</h2> <p>Wenn Sie mit <em><iframe></arbeiten. em>-Tag, werden Sie feststellen, dass der Inhalt von einem Rahmen umgeben ist. Wenn Sie diesen Rahmen entfernen m√∂chten, k√∂nnen Sie den <a href="/css-borders/"><em>border:none;</em></a><a href="/css-borders/" verwenden. > CSS-Attribut</a>.</p> <p>Die historische Gesellschaft hat uns gebeten, den Rahmen um das YouTube-Video von ihrer Website zu entfernen. Hier ist der Code, den wir verwenden wurden, um den Rahmen zu entfernen:</p> <p>Unser Code kehrt zuruck: <br> </p> <figure class = "wp-Block-Bild"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "GqIGiI370xPK2xxk C LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </ figure> <p>Unser Video hat jetzt keinen Rahmen mehr.</p> <h2>HTML-Iframe-Link-Ziele</h2> <p>Zus√§tzlich k√∂nnen <em><iframe></em>-Tags verwendet werden als Zielframe fur einen Link. Wir k√∂nnen einen iframe als Zielframe fur einen Link festlegen, indem wir das Zielattribut in einem HTML-Link verwenden. Das Ziel-HTML-Attribut muss sich auf das name-Attribut eines <em><iframe></em> beziehen.</p> <p>Angenommen, die historische Gesellschaft h√§tte ein weiteres Video, das wir auf ihrer Website zu Artikel I von . zeigen sollen der US-Verfassung. Dieses Video wurde auch von der Khan Academy ver√∂ffentlicht.</p> </a></div><p>Wenn auf der Webseite auf den Text <em>Geburt</em> geklickt wird, sollte das Video <em>Geburt der US-Verfassung</em> im iframe gerendert werden. Wenn der Text <em>Artikel I</em> angeklickt wird, sollte das Video zu Artikel I der Verfassung gerendert werden.</p> <p>Wir k√∂nnten den folgenden Code verwenden, um diese Aufgabe zu erfullen:</p> <p>Unser Code gibt Folgendes zuruck:</p> <figure class="wp -block-image"><img class="lazyload" data-src="https://lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr"alt = "RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr"> </ figure> <p>Standardm√§√üig ist das Video auf der Geburt der US-Verfassung ist in der iframe gezeigt. Der Inhalt des iFrames √§ndert sich, um auf das Video der Khan Academy zu Artikel I der Verfassung zu verweisen. Dies geschieht, wenn wir auf die URL <em>Artikel I</em> klicken.</p> </div> <p>Unser iframe wird auf das Video zur Geburt der Verfassung umgeleitet, wenn dieses Video nicht bereits vorgestellt wird, wenn wir auf <em>Geburt</em> klicken.</p> <h2> Fazit</h2> <p>Das <em><iframe></em> HTML-Tag bettet externe Webressourcen wie Webseiten in eine andere Webseite ein. Dies ist nutzlich, wenn Sie Ihrer Site Karten, Dateien, Videos oder andere Webseiten hinzufugen m√∂chten.</p> <p>In diesem Tutorial wurde anhand von Beispielen die Verwendung des HTML-<em><iframe> </em>-Tag zum Rendern externer Webressourcen auf einer Webseite. Jetzt haben Sie das n√∂tige Wissen, um das <em><iframe></em>-Tag wie ein Profi zu verwenden!</p> <p>Weitere Informationen zum Programmieren in HTML finden Sie in unserem <a href="/learn-html/"></a><a href="/learn-html/">Leitfaden zum Erlernen der HyperText Markup Language</a>.</p>