Para navegar URL en iframe con JavaScript, debemos establecer el atributo src o devolver el valor del atributo src en un elemento iframe. El atributo src define la URL del documento que se puede mostrar en un iframe.
Sintaxis:
document.getElementById("selector").src = "URL";
Valores de URL: los valores posibles de las URL son:
- URL absoluta: Apunta a otro sitio web (Por ejemplo: https://www.geeksforgeeks.org/c-plus-plus/).
- URL relativa: Apunta a un archivo dentro de un sitio web (Por ejemplo: /gfg.php).
Valor devuelto: Devuelve la url completa del documento que está incrustado en el iframe .
Ejemplo 1: a continuación se muestra el código que ilustra el uso de URL absoluta.
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<iframe id="gfgFrame" src=""
style="height: 50vh; width: 600px;">
</iframe>
<p>Click to visit GeeksForGeeks website</p>
<button onclick="navigate()">
Click it
</button>
<script>
function navigate() {
document.getElementById("gfgFrame").src
= "https://www.geeksforgeeks.org/";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra el código que ilustra la URL relativa.
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<iframe id="gfgFrame" src=""
style="height: 50vh; width: 600px;">
</iframe>
<br>
<button onclick="navigate()">
Click it
</button>
<script>
function navigate() {
document.getElementById
("gfgFrame").src = "home.html";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namanaggarwal1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA