En este artículo, aprenderemos a especificar el contenido de una página web en <iframe> en un navegador web de forma estática y dinámica mediante el uso de JavaScript con HTML. Necesitamos un navegador web, es decir, Chrome (recomendado) o la aplicación Electron. Este artículo explicará la forma correcta de asignar o incrustar cualquier página web externa a otra página web o incluso cambiar el contenido de esa página incrustada de forma dinámica mediante JavaScript. ¡Vamos a empezar!
Nota: hay algunos sitios web que no se pueden mostrar en <iframe> , discutiremos esto más adelante en el artículo.
Sintaxis:
<iframe id="" src="" style=""></iframe>
El miembro src del objeto < iframe> contiene la fuente de la página web incrustada. Podemos asignarle estáticamente la dirección y cambiarla dinámicamente en tiempo de ejecución, como también se analiza a continuación:
Enfoque de asignación dinámica:
-
Obtenga la fuente del campo de entrada.
let geeks = document.getElementById("<id name/class name>").value; -
Asigne la entrada al miembro ‘ src ‘ del iframe.
document.getElementById("<id name/class name>").src = geeks;
A continuación se muestra el código que ilustra el uso de iframe.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe id="embed1" src=
"https://www.geeksforgeeks.org"
style="border-style:1px;border-style: solid;
width:100%; height:400px;
margin-bottom: 40px;">
</iframe>
<input type="text" id="source" style="width: 60%"
placeholder="Enter the link of source."/>
<button id="loadpage">Change Webpage</button>
<script>
document.getElementById("loadpage").onclick =
function updatesource() {
let newsource = document.getElementById("source").value;
document.getElementById("embed1").src = newsource;
};
</script>
</body>
</html>
Producción:
-
Cuando se carga la página, la página predeterminada se ve a continuación
-
Después de ingresar la nueva fuente de la página web en el campo de entrada y presionar el botón «Cambiar página web».
¿Si <iframe> no funciona?
Sitios web como google.com, facebook.com, messenger.com y muchos más no admiten iframe debido a algunos conflictos de origen.
Este es el error que obtendrá en la consola si intenta cargar esos sitios web que no son compatibles con iframe .
Nota:
- Deberá aplicar «http://» o «https://» antes de la dirección del sitio web; de lo contrario, dará error.
- Tenga en cuenta aquellos sitios web que no admiten el iframe .
Publicación traducida automáticamente
Artículo escrito por therain0605 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA