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/c">C ++</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/what-is--in-c">Was ist += in C++?</a> </div> <div class="white-news__text"> In C ++ ist das+= eine Kombination von zwei Operatoren, einer ist der Additionsoperator und der zwei... </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/bash-programming">Bash -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-fix---bash-pip-command-not-found">So reparieren Sie - Bash Pip -Befehl nicht gefunden</a> </div> <div class="white-news__text"> Der... </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/bash-programming">Bash -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-find-the-length-of-an-array-in-shell-script">So finden Sie die Länge eines Arrays im Shell -Skript</a> </div> <div class="white-news__text"> Die drei Möglichkeiten, die Länge eines Array in Shell zu finden.... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</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/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-and-use-oracle-virtualbox-extension-pack">So installieren und verwenden Sie das Oracle VirtualBox -Erweiterungspaket?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/python-chmod">Python Chmod</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-getelementsbytagname-method-in-javascript">Verwendung von GetElementsByTagName -Methoden in JavaScript</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</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/what-does-w-metacharacter-do-in-regexp-of-javascript">Was macht W Metacharacter in Regexp von JavaScript?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</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-aws-tools-and-devops-are-needed-to-develop-a-web-app">Welche AWS -Tools und DevOps benötigen, um eine Web -App zu entwickeln?</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/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/break-and-continue-statements-in-c">Brechen und Aussagen in C# fortsetzen</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-throw-keyword-in-c">So verwenden Sie Wurf Keyword in C#</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-int-and-double-in-c">Was ist der Unterschied zwischen int und doppelt in C#</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/prof-dr-julien-plank">Prof. Dr. Julien Plank</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>