javascript - from - js iframe contentdocument
¿Cómo obtener el contenido del cuerpo de un iframe en Javascript? (8)
<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
<html>
<head></head>
<body class="frameBody">
test<br/>
</body>
</html>
</iframe>
Lo que quiero obtener es:
test<br/>
AFAIK, un iframe no se puede usar de esa manera. Debe señalar su atributo src a otra página.
A continuación, se indica cómo obtener el contenido de su cuerpo utilizando un javascript antiguo. Esto funciona tanto con IE como con Firefox.
function getFrameContents(){
var iFrame = document.getElementById(''id_description_iframe'');
var iFrameBody;
if ( iFrame.contentDocument )
{ // FF
iFrameBody = iFrame.contentDocument.getElementsByTagName(''body'')[0];
}
else if ( iFrame.contentWindow )
{ // IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName(''body'')[0];
}
alert(iFrameBody.innerHTML);
}
Chalkey es correcto, debe usar el atributo src para especificar la página que se incluirá en el iframe. Siempre que lo haga y el documento en el iframe esté en el mismo dominio que el documento principal, puede usar esto:
var e = document.getElementById("id_description_iframe");
if(e != null) {
alert(e.contentWindow.document.body.innerHTML);
}
Obviamente, puede hacer algo útil con los contenidos en lugar de ponerlos en alerta.
Creo que colocar texto entre las etiquetas está reservado para los navegadores que no pueden manejar iframes, es decir ...
<iframe src ="html_intro.asp" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
Utiliza el atributo ''src'' para establecer el origen de los iframes html ...
Espero que ayude :)
El siguiente código es compatible con varios navegadores. Funciona en IE7, IE8, Fx 3, Safari y Chrome, por lo que no es necesario manejar problemas entre navegadores. No hizo la prueba en IE6.
<iframe id="iframeId" name="iframeId">...</iframe>
<script type="text/javascript">
var iframeDoc;
if (window.frames && window.frames.iframeId &&
(iframeDoc = window.frames.iframeId.document)) {
var iframeBody = iframeDoc.body;
var ifromContent = iframeBody.innerHTML;
}
</script>
Funciona perfectamente para mí :
document.getElementById(''iframe_id'').contentWindow.document.body.innerHTML;
La pregunta exacta es cómo hacerlo con JavaScript puro no con jQuery.
Pero siempre uso la solución que se puede encontrar en el código fuente de jQuery. Es solo una línea de JavaScript nativo.
Para mí, es el mejor, fácil de leer e incluso afaik la forma más rápida de obtener el contenido de iframes.
Primero, obtenga su iframe
var iframe = document.getElementById(''id_description_iframe'');
// or
var iframe = document.querySelector(''#id_description_iframe'');
Y luego usa la solución de jQuery
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
Funciona incluso en Internet Explorer, que hace este truco durante la propiedad
contentWindowdel objetoiframe. La mayoría de los otros navegadores usan la propiedadcontentDocumenty esa es la razón por la que probamos esta propiedad primero en esta condición OR. Si no está configurado, pruebacontentWindow.document.
Seleccionar elementos en iframe
Entonces usualmente puede usar getElementById() o incluso querySelectorAll() para seleccionar el elemento DOM del iframeDocument :
if (!iframeDocument) {
throw "iframe couldn''t be found in DOM.";
}
var iframeContent = iframeDocument.getElementById(''frameBody'');
// or
var iframeContent = iframeDocument.querySelectorAll(''#frameBody'');
Funciones de llamada en el iframe
Obtenga solo el elemento window de iframe para llamar a algunas funciones globales, variables o bibliotecas completas (por ejemplo, jQuery ):
var iframeWindow = iframe.contentWindow;
// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery(''#frameBody'');
// or
iframeContent = iframeWindow.$(''#frameBody'');
// or even use any other global variable
iframeWindow.myVar = window.myVar;
// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);
Nota
Todo esto es posible si observas la misma política de origen .
Usando JQuery, intente esto:
$("#id_description_iframe").contents().find("body").html()
usar content en iframe con JS:
document.getElementById(''id_iframe'').contentWindow.document.write(''content'');