Ändern Sie die Iframe-Quelle in JavaScript
iframe ist ein HTML-Element, das verwendet wird, um eine Website innerhalb einer Webseite mit Hilfe einer Seiten-URL oder eines Pfads anzuzeigen. Innerhalb des aktuellen HTML-Dokuments können wir ein weiteres Dokument einbetten.
Um die Größe von iframe anzugeben, können wir die Attribute "height" und "width" separat oder Style-Attribute für CSS verwenden.
Syntax:
<iframe src="dummy_iframe.htm" height="200" width="300" title="Dummy Iframe"></iframe>
Ändern Sie die iframe-Quelle in JavaScript
Die Idee hinter dem Ändern der iframe-Quelle ist, die Webseite in der Anzeige von iframe zu wechseln. In JavaScript können wir die Quelle ändern oder mit der JavaScript-Standardmethode getElementById() neu definieren.
Wir können den neuen Pfad oder die URL der Webseite zu getElementById("idOfElement").src neu zuweisen.
Syntax:
getElementById('idOfElement').src = 'newPath.html'
Beispielcode:
<!DOCTYPE html>
<html>
<body>
<h2>Change iframe source in JavaScript</h2>
<p>Click the chosen button to view the chosen page on the website in iframe:</p>
<button onclick="myFunction('https://www.delftstack.com/')">Click to display Home</button>
<button onclick="myFunction('https://www.delftstack.com/about-us/')">Click to display About</button>
<br></br>
<script type="text/javascript">
function myFunction(path) {
document.getElementById('myIframe').src = path;
}
</script>
<iframe id="myIframe" src="https://www.delftstack.com/" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>
</html>
Im obigen Quellcode haben wir den HTML-Block iframe mit <iframe></iframe>-Tags mit angegebener Breite und Höhe erstellt. Wir haben dem iframe-Element eine ID zugewiesen, und das Standardattribut src ist dem Pfad "https://www.delftstack.com/" zugeordnet.
Wir haben myFunction() deklariert, das den Pfad als Argument erhält. In dieser Funktion haben wir document.getElementById() verwendet, das die HTML-Element-ID empfängt und diesen übergebenen Pfad der src zuweist.
Wir haben mehrere Schaltflächen zum Umschalten der iframe-Quelle erstellt und myFunction() mit dem Pfad zum Klickereignis dieser Schaltflächen aufgerufen.
Alternativer Weg in JQuery
Es gibt eine Standardmethode attr() in JQuery. Wir können diese Methode auch verwenden, um das Attribut und den Wert festzulegen. Wie unten gezeigt, können wir auch JQuery verwenden, um die Quelle iframe neu zuzuweisen.
Syntax:
$('#idOfElement').attr('src', 'https://www.delftstack.com/');
Unter Verwendung der Element-ID wurde die Standardmethode attr() aufgerufen und das Attribut und der Wert übergeben.