javascript - example - fancybox open
FancyBox muestra los contenidos de un DIV como tipo iFrame (2)
¿Realmente espera que <iframe src="#myID"></iframe> abra un elemento que tenga id myID en iframe?
Si desea imprimir el contenido de FancyBox, puede agregar el botón Imprimir - http://jsfiddle.net/s3jRA/
Demostración actualizada - http://jsfiddle.net/qVrLr/ - para crear y actualizar contenidos de iframe
Esto funciona perfectamente bien:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({''href'' : ''http://www.cnn.com'',''frameWidth'':500,''frameHeight'':500,''hideOnContentClick'': false,''type'':''iframe''});
});
</script>
Es decir, FancyBox abre y muestra la página de inicio de CNN. Sin embargo, si cambio el atributo href a "#pg"
y tiene la página codificada de esta manera:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC /"-//W3C//DTD XHTML 1.0 Transitional//EN/" /"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd/"><html xmlns=/"http://www.w3.org/1999/xhtml/"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox se abre pero no se muestra texto. (El texto "enviar mensaje de texto ahora" se muestra en el elemento div #pg. Observe que está asignado al HTML interno de DIV al final de la página).
Básicamente, quiero saber si hay una manera de inicializar dinámicamente la propiedad innerHTML de un DIV y mostrarla como un iFrame tipo FancyBox. (El contenido del iFrame tendrá un botón que imprime el documento del iFrame).
TIA
ACTUALIZACIÓN: 28/07/12
Como sugirió @arttronics, armé un jsFiddle
Para resumir, en última instancia, el objetivo es poder hacer clic en un botón contenido dentro de una FancyBox que imprime todo el contenido de la FancyBox sin abrir otra ventana. (Quiero utilizar FancyBox como visor de informes para el contenido analizado por Javascript).
Supongo que necesito mostrar el contenido usando el reproductor iframe de FancyBox, pero podría estar equivocado.
El jsFiddle muestra:
El FancyBox puede mostrar texto que se valida como una página HTML usando el reproductor en línea. El texto puede ser referenciado a través de href o content .
Sin embargo, cuando el jugador es un iframe y el contenido proviene de href , entonces el contenedor de FancyBox está vacío. Si el contenido proviene del atributo de content , FancyBox muestra un error 404.
Simplemente comente y elimine el comentario del código jsFiddle para ver a qué me refiero.
¡Cualquier idea sobre cómo puedo cumplir mi objetivo es apreciada y obtendré un voto positivo!
TIA.
Actualización: 31/07/2012
Este nuevo ejemplo de jsFiddle: el visor de informes Iframe funciona, pero no en FancyBox
Como puede ver, he intentado varias formas de mostrar el iframe en FancyBox. Y aunque FancyBox muestra el contenido del iframe , la característica de impresión se rompe.
Creo que un método para resolver este problema sería escribir el contenido de myContent var en FancyBox después de cargarlo, pero no puedo (A) encontrar el nodo DOM correcto en el que escribir, y (B) puedo hacerlo '' t consigue que FancyBox muestre un iframe utilizando su reproductor iframe cuando el iframe src="about:blank" .
¿Alguna sugerencia? ¿O ves una forma de arreglar el ejemplo jsFiddle?
Como suele ser el caso, estaba mirando las cosas al revés. La solución (con advertencias) es esta, en lugar de mostrar un elemento div utilizando el reproductor de iframe, ocultar un iframe en el html y mostrarlo con el reproductor en línea.
Vea este ejemplo de trabajo: jsFiddle
Esto resuelve el problema de poder imprimir contenido dinámico sin abrir otra ventana. Además, si el texto se desborda en FancyBox, los contenidos completos aún se imprimen. (Eso es algo que no podría suceder cuando imprimí el FancyBox y cambié los diversos estilos de visibilidad de elementos de página a ocultos).
Grandes advertencias
He probado esto en IE 8 y funciona, sin embargo, todavía no puedo hacer que esto funcione en Chrome.
Una razón para probar este enfoque fue mi suposición de que podría incluir dentro del contenido de la página dianmica un estilo de impresión @media. Esa técnica no funciona (en IE de todos modos) por alguna razón. Sin embargo, los estilos en línea funcionan igual que las etiquetas de marcado HTML (observe la etiqueta <strong> en el ejemplo de jsFiddle: var myContent). Entonces algo es extraño.