span - obtener contenido de un div javascript
Escribir elementos en un iframe hijo usando Javascript o jQuery (5)
Después de algunas investigaciones, y una respuesta que corrobora de Mike, he encontrado que esta es una solución:
var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
d.open(); d.close(); // must open and close document object to start using it!
// now start doing normal jQuery:
$("body", d).append("<div>A</div><div>B</div><div>C</div>");
Tengo algo como esto:
<html>
<body>
<iframe id="someFrame"></iframe>
</body>
</html>
Y me gustaría usar jQuery para escribir elementos tales que el HTML completo equivalente sería así:
<html>
<body>
<iframe id="someFrame">
<!-- inside the iframe''s content -->
<!-- <html><body> -->
<div>A</div>
<div>B</div>
<div>C</div>
<!-- </body></html> -->
</iframe>
</body>
</html>
Alternativamente, cualquier simple Javascript viejo estaría bien.
Gracias.
Editar : después de investigar un poco más, parece que estoy buscando un equivalente de IE de la propiedad contentDocument de un iframe. "contentDocument" es un estándar W3C que admite FF, pero IE no. (sorpresa sorpresa)
Hay dos métodos confiables para acceder al elemento del document dentro de un iframe :
1. La propiedad window.frames :
var iframeDocument = window.frames[''iframeName''].document; // or // var iframeDocument = window.frames[iframeIndex].document;
2. La propiedad contentDocument :
var iframeDocument = document.getElementById(''iframeID'').contentDocument; // or // var iframeDocument = document.getElementById(''iframeID'').contentWindow.document;
He encontrado que esto es compatible con varios navegadores ... un pequeño cruce de respuestas anteriores y un poco de prueba y error. :)
Estoy usando esto para descargar un informe o, si ocurre un error (mensaje), se muestra en el iFrame. La mayoría de los usuarios probablemente tendrán el iFrame oculto, lo estoy usando multifuncional.
La cuestión es que tengo que borrar el contenido del iFrame cada vez que hago clic en el botón de descarga del informe: el usuario puede cambiar los parámetros y sucede que no hay resultados que luego se muestren en el iFrame como un mensaje. Si hay resultados, el iFrame permanece vacío, porque el código siguiente lo ha borrado y el método window.open(...) genera un documento Content-Disposition: attachment;filename=...
var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''''); // clear iFrame contents <- I''m using this...
$body.append(''<i>Writing into the iFrame...</i>''); // use this to write something into the iFrame
window.open(Module.PATH + ''php/getReport.php'' + Report.queryData, ''reportIFrame'');
No tengo un navegador que admita contentDocument pero lo he codificado de esta manera, así que lo dejo. ¿Tal vez alguien tiene navegadores más antiguos y puede publicar confirmaciones / problemas de compatibilidad?
Puedes hacer ambas cosas, solo tienes que enfocarte de forma diferente:
var ifrm = document.getElementById(''myIframe'');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(''Hello World!'');
ifrm.document.close();
Voy a dar un paso aquí y sugerir que las respuestas propuestas hasta ahora no son posibles.
Si este iframe realmente tiene src = "somepage.html" (que debería haber indicado, y si no, ¿para qué sirve iframe?), Entonces no creo que Jquery pueda manipular directamente html en todos los marcos de todos los navegadores. . En función de mi experiencia con este tipo de cosas, la página que contiene no puede llamar directamente a las funciones o hacer ningún tipo de contacto de Javascript con la página iframe.
Su "somepage.html" (la página que se carga en el iframe) necesita hacer dos cosas:
- Pase algún tipo de objeto a la página que lo contiene y que puede usarse como puente
- Tener una función para configurar el HTML como lo desees
Entonces, por ejemplo, somepage.html podría verse así:
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge={
setHtml:function(htm) {
document.body.innerHTML=htm;
}
}
$(function() { parent.setBridge(bridge); });
//--></script>
</head>
<body></body>
</html>
y la página que lo contiene podría verse así:
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
bridge=br;
bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
}
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>
Esto puede parecer un poco intrincado, pero se puede adaptar en varias direcciones y debería funcionar al menos en IE, FF, Chrome, y probablemente Safari y Opera ...