Dieser Blog erklärt, wie man die Iframe-Quelle in JavaScript ändert.
Was ist ein Inline-Frame?
Ein ' Inline-Rahmen “ wird verwendet, um ein anderes angegebenes Dokument innerhalb des aktuellen Dokuments zu enthalten. Dies führt dazu, dass die Webseiten auf der Grundlage der angegebenen Links geschaltet werden.
Wie ändere ich die Iframe-Quelle in JavaScript?
Die Iframe-Quelle kann in JavaScript mithilfe der folgenden Ansätze zusammen mit dem „ getElementById() ' Methode:
- „ Übergebener Parameter „Technik.
- „ ausgewähltIndex ' Eigentum.
Ansatz 1: Ändern Sie die Iframe-Quelle in JavaScript mithilfe der Passed-Parameter-Technik
Diese Technik kann verwendet werden, um auf die angegebene Seite zu wechseln, indem der entsprechende Seitenlink als Parameter einer Funktion platziert wird, wenn sie mit Hilfe einer Schaltfläche aufgerufen wird.
Beispiel
Folgen wir dem unten aufgeführten Beispiel:
< Center >< h2 > Ändern Sie die Iframe-Quelle in JavaScript h2 >
< Iframe-ID = 'Website' Quelle = 'https://linuxhint.com/detect-tab-key-javascript/' Breite = '1000' Höhe = '550' Bilderrandbereich = '0' scrollen = 'Nein' > iframe >
< Br >< Br >
< Schaltfläche anklicken = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klicken Sie hier, um die Linux-Befehlsseite anzuzeigen Taste >
< Br > Br >
Center >
Führen Sie in den obigen Codezeilen die folgenden Schritte aus:
- Geben Sie den angegebenen Link im „
”-Tag zusammen mit den angepassten Abmessungen. - Erstellen Sie außerdem eine Schaltfläche mit einem angehängten „ anklicken ” Ereignis, das zur Funktion changeIframe() umleitet, die den angegebenen Link als Parameter hat.
- Dies führt dazu, dass die Seite beim Klicken auf die Schaltfläche auf den angegebenen Link geleitet wird.
Fahren wir mit dem JavaScript-Teil des Codes fort:
< Skripttyp = 'text/javascript' >
Funktion changeIframe ( Rückgeld ) {
dokumentieren. getElementById ( 'Website' ) . Quelle = Rückgeld ;
}
Skript >
Im obigen Code-Snippet:
- Deklarieren Sie eine Funktion mit dem Namen „ changeIframe() “.
- Greifen Sie in seiner Definition auf den angegebenen Link im „ Inline-Rahmen ”-Element mit dem “ document.getElementById() ' Methode.
- Wenden Sie danach das „ Quelle ”-Attribut und ordnen den angegebenen Link beim Funktionsaufruf dem aufgerufenen Link mit dem Parameter “ Rückgeld “.
- Dies führt dazu, dass die Seiten in Bezug auf die angegebenen Links beim Klicken auf die Schaltfläche umgeschaltet werden.
Ausgabe
In der obigen Ausgabe kann beobachtet werden, dass die Seiten umgeschaltet werden, wenn auf die Schaltfläche geklickt wird.
Ansatz 2: Ändern Sie die Iframe-Quelle in JavaScript mithilfe der Eigenschaft selectedIndex
Das ' ausgewähltIndex ”-Eigenschaft gibt den Index der ausgewählten Option in einer Dropdown-Liste zurück. Diese Eigenschaft kann angewendet werden, um auf den angegebenen Link in Bezug auf den Wert der ausgewählten Option aus der Dropdown-Liste umzuleiten.
Beispiel
Betrachten wir das folgende Beispiel:
< Iframe-ID = 'Website' Quelle = 'https://linuxhint.com/detect-tab-key-javascript/' Breite = '1000' Höhe = '550' Bilderrandbereich = '0' scrollen = 'Nein' > iframe >
< Br >< Br >
< ID auswählen = 'links' >
< Optionswert = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Wechseln Sie zu Artikel 1
< Optionswert = 'https://linuxhint.com/convert-array-to-object-javascript/' > Wechseln Sie zu Artikel zwei
auswählen >
< Br >< Br >
< Schaltfläche onClick = 'changeIframe();' > Iframe-Quelle ändern Taste >
< Br >< Br >
Karosserie > Center >
Führen Sie in den obigen Codezeilen die folgenden Schritte aus:
- Erinnern Sie sich an den Schritt zum Angeben des angegebenen Links innerhalb des „