La etiqueta <iframe> especifica un marco en línea. Nos permite cargar un archivo HTML separado en un documento existente.
Fragmento de código:
function getIframeContent(frameId) {
var frameObj =
document.getElementById(frameId);
var frameContent = frameObj.
contentWindow.document.body.innerHTML;
alert("frame content : " + frameContent);
}
Algunas de las definiciones se dan a continuación:
- getIframeContent(frameId): Se utiliza para obtener la referencia del objeto de un iframe.
- contentWindow: Es una propiedad que devuelve el objeto ventana del iframe.
- contentWindow.document: Devuelve el objeto de documento de la ventana iframe.
- contentWindow.document.body.innerHTML: Devuelve el contenido HTML del cuerpo del iframe.
Ejemplo: El siguiente ejemplo demuestra incluir un archivo HTML separado en un documento existente.
<!DOCTYPE html>
<html>
<head>
<title>
How to get HTML content of
an iFrame using javascript?
</title>
</head>
<body>
<iframe id="frameID" src=
"ContentOfFrame.html">
</iframe>
<a href="#" onclick=
"getIframeContent('frameID');">
Get the content of Iframe
</a>
<script>
function getIframeContent(frameID) {
var frameObj =
document.getElementById(frameID);
var frameContent = frameObj
.contentWindow.document.body.innerHTML;
alert("frame content : " + frameContent);
}
</script>
</body>
</html>
ContentOfFrame.html El siguiente ejemplo demuestra el contenido del código HTML del archivo “ContentOfFrame.html”
<!DOCTYPE html> <html> <body> GeeksForGeeks: A Computer Science Portal For Geeks (It is loaded inside the iframe) </body> </html>
Producción:
- Antes de hacer clic en el enlace:
- Después de hacer clic en el enlace:
