So ändern Sie die Iframe -Quelle in JavaScript?

Jean Dengler

Beim Erstellen einer Webseite oder der Website ist es erforderlich, den Endbenutzer auf eine andere Webseite umzuleiten, um auf die relevanten/gesuchten zuzugreifen “Inhalt”. Darüber hinaus werden gleichzeitig verschiedene Funktionen für den Benutzer bereitgestellt, wodurch Barrierefreiheit möglich ist. In solchen Fallszenarien wirkt sich das Ändern der Iframe -Quelle in JavaScript aus.

In diesem Blog wird erklärt, wie die Iframe -Quelle in JavaScript geändert werden kann.

Was ist ein Inline -Rahmen??

Ein "Inline -RahmenWird verwendet, um ein anderes bestimmtes Dokument innerhalb des aktuellen Dokuments zu enthalten. Dies führt dazu, dass die Webseiten basierend auf den angegebenen Links wechseln.

So ändern Sie die Iframe -Quelle in JavaScript?

Die Iframe -Quelle kann in JavaScript mit den folgenden Ansätzen zusammen mit der “geändert werdenGetElementById ()" Methode:

“Parameter bestanden”Technik.
“SelectedIndex" Eigentum.

Ansatz 1: Ändern Sie die Iframe -Quelle in JavaScript mithilfe der bestandenen Parametertechnik

Diese Technik kann verwendet werden, um zur angegebenen Seite zu wechseln, indem der entsprechende Seitenlink als Parameter einer Funktion platziert wird, wenn er mit Hilfe einer Schaltfläche zugegriffen wird.

Beispiel
Folgen wir dem folgenden Beispiel:

Ändern Sie die Iframe -Quelle in JavaScript

Führen Sie in den obigen Codezeilen die folgenden Schritte aus:

Geben Sie den angegebenen Link in "an" an "Tag zusammen mit den angepassten Abmessungen.
Erstellen Sie auch eine Taste mit einem angehängten “ONCLICK”Ereignisumleitung zum Funktionswechsel () mit der angegebenen Verbindung als Parameter.
Dies führt dazu, dass die Seite auf den angegebenen Link auf dem Schaltflächenklick geleitet wird.

Fahren wir mit dem JavaScript -Teil des Codes fort:

Im obigen Code -Snippet:

Eine Funktion namens deklarieren “Changeiframe ()”.
Greifen Sie in seiner Definition auf den angegebenen Link in der “zu“Inline -Rahmen”Element mit der“dokumentieren.GetElementById ()" Methode.
Danach anwenden Sie die “src”Attribut und die angegebene Verbindung über den Funktionszugriff auf die zugegriffene Verbindung über den Parameter“ zuordnenändern”.
Dies führt dazu, dass die Seiten in Bezug auf die angegebenen Links auf der Schaltfläche Klick umschaltet werden.

Ausgang

In der obigen Ausgabe kann beobachtet werden, dass die Seiten beim Klicken auf die Schaltfläche geschaltet werden.

Ansatz 2: Ändern Sie die Iframe -Quelle in JavaScript mithilfe der SelectedIndex -Eigenschaft

Der "SelectedIndexDie Eigenschaft gibt den Index der ausgewählten Option in einer Dropdown-Liste zurück. Diese Eigenschaft kann angewendet werden, um in Bezug auf den Wert der ausgewählten Option aus der Dropdown -Liste auf den angegebenen Link umzuleiten.

Beispiel
Beobachten wir das folgende Beispiel:

Führen Sie in den obigen Codezeilen die folgenden Schritte aus:

Erinnern Sie sich an den Schritt, um die angegebene Verbindung innerhalb der “anzugeben.“</strong>"Tag mit dem angegebenen"<strong>Ausweis</strong>Und angepasste Abmessungen.</li> <li>Fügen Sie im nächsten Schritt die "ein"<strong>wählen</strong>"Element mit dem angegebenen"<strong>Ausweis</strong>”So erstellen Sie eine Dropdown-Liste.</li> <li>Danach enthalten die “<strong>Möglichkeit</strong>Element zum Definieren des Wertes der Option. </li> <li>Geben Sie die angegebenen Links als die “an<strong>Wert</strong>”Des Optionselements.</li> <li>Erstellen Sie auch eine Schaltfläche mit einer "<strong>ONCLICK</strong>Ereignis, das den Funktionswechsel aufgerufen wird ().</li> </ul> <p>Gehen wir mit dem JavaScript -Teil des Codes fort:</p> <script type="text/javascript"><br>function changeIframe() <br>var get = document.getElementById("links");<br>var dropDown = get.options[get.selectedIndex].value;<br>document.getElementById("webpage").src= dropDown ;<br><br></script> <p>Im obigen Code -Snippet:</p> <ul> <li>Definieren Sie eine Funktion namens “<strong>Changeiframe ()</strong>”. </li> <li>In seiner Definition auf die angegebenen zugreifen “<strong>wählen</strong>”Element durch seine“<strong>Ausweis</strong>" Verwendung der "<strong>dokumentieren.GetElementById ()</strong>" Methode.</li> <li>Wenden Sie im nächsten Schritt die an<strong>SelectedIndex</strong>" und das "<strong>Wert</strong>”Eigenschaften, um den Wert i umzuleiten i.e. Link mit der entsprechenden ausgewählten Option.</li> </ul> <p><strong>Ausgang</strong></p> <p>Aus der obigen Ausgabe ist es offensichtlich, dass die Seiten in Bezug auf die “ordnungsgemäß umschalten<strong>Optionen</strong>”Wert auf die Schaltfläche Klicken.</p> <p>Abschluss</p> <p>Der "<strong>GetElementById ()</strong>Methode in Kombination mit der übergebenen Parametertechnik oder der “<strong>SelectedIndex</strong>Eigenschaft kann verwendet werden, um die Iframe -Quelle in JavaScript zu ändern. Die frühere Technik kann verwendet werden. Der letztere Ansatz kann implementiert werden, um zu den entsprechenden Links in Bezug auf die ausgewählte Option aus der Dropdown -Liste umzusteigen. In diesem Tutorial wird erläutert, wie die Iframe -Quelle in JavaScript ändert. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://www.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« So ändern Sie den Seitentitel in JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">So ändern Sie die Benachrichtigung der Discord -Benachrichtigung auf dem Handy auf dem Handy? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/bash-programming">Bash -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-check-availability-by-using-ping-in-bash-scripts">So überprüfen Sie die Verfügbarkeit, indem Sie Ping in Bash -Skripten verwenden</a> </div> <div class="white-news__text"> Ping -Befehl sendet ICMP -Pakete (Internet Control Message Protocol) an den Zielhost und misst die A... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c-programming">C -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-register-keyword-in-c">Verwenden Sie das Register -Schlüsselwort in c</a> </div> <div class="white-news__text"> In C weist das Schlüsselwort Register den Compiler an, festzustellen, dass eine bestimmte Variable i... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/kaya-wyludda">Kaya Wyludda</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-and-use-the-aptitude-package-manager-on-debian-top-10-bullseye">So installieren und verwenden Sie den Aptitude -Paket -Manager auf Debian Top 10 Bullseye</a> </div> <div class="white-news__text"> So installieren Sie den Aptitude -Paket -Manager auf Debian, verwenden Sie den APT -Paketmanager. Le... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/postgresql-create-index-concurrently">Postgresql erstellen Index gleichzeitig</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">Betrachtet man Oracle Fusion als besser als SAP??</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-mouseevent-screenx-property-in-javascript">So verwenden Sie die MouseEvent ScreenX -Eigenschaft in JavaScript</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Was ist ein undefinierter Indexfehler in PHP und wie man ihn behebt??</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-aws-batch-and-lambda">Was ist der Unterschied zwischen AWS -Batch und Lambda?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-comparison-operators-in-powershell">So verwenden Sie Vergleichsbetreiber in PowerShell?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-oracle-virtualbox-and-vmware">Was ist der Unterschied zwischen Oracle VirtualBox und VMware?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/difference-between-private-and-protected-in-c">Unterschied zwischen privat und geschützt in C ++</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/stephan-harms">Stephan Harms</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/can-i-use-sqlite-online">Kann ich SQLite online verwenden??</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-programming">C -Programmierung</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between--and--operators-in-c-programming">Was ist der Unterschied zwischen = und == Operatoren in der C -Programmierung?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>