Tuvimos este tipo de problema, pero un poco inverso a su situación: estábamos proporcionando el contenido iframed a sitios en otros dominios, por lo que la misma política de origen también fue un problema. Después de pasar muchas horas buscando en Google, finalmente encontramos una solución (algo ...) viable, que puede adaptar a sus necesidades.
Hay una forma de evitar la misma política de origen, pero requiere cambios tanto en el contenido iframed como en la página de trama, por lo que si no puede solicitar cambios en ambos lados, este método no será muy útil para usted, Me temo que.
Hay una peculiaridad del navegador que nos permite eludir la misma política de origen: JavaScript puede comunicarse con páginas en su propio dominio o con páginas que tiene iframed, pero nunca páginas en las que está enmarcado, por ejemplo, si tiene:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
luego home.html
puede comunicarse con framed.html
(iframed) y helper.html
(mismo dominio).
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+
framed.html
puede enviar mensajes a helper.html
(iframed) pero no home.html
(el niño no puede comunicarse entre dominios con el padre).
La clave aquí es que helper.html
puede recibir mensajes framed.html
y también puede comunicarse con ellos home.html
.
Entonces, esencialmente, cuando se framed.html
carga, calcula su propia altura, le dice helper.html
, a quién le pasa el mensaje home.html
, que luego puede cambiar el tamaño del iframe en el que se framed.html
encuentra.
La forma más sencilla de encontrar mensajes de framed.html
a helper.html
fue a través de un argumento de URL. Para hacer esto, framed.html
tiene un iframe con src=''
especificado. Cuando se onload
dispara, evalúa su propia altura y establece el src del iframe en este punto enhelper.html?height=N
¡Aquí hay una explicación de cómo Facebook lo maneja, que puede ser un poco más claro que el mío anterior!
Código
En www.foo.com/home.html
, se requiere el siguiente código javascript (esto se puede cargar desde un archivo .js en cualquier dominio, por cierto ...):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
En www.bar.net/framed.html
:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
Contenido de www.foo.com/helper.html
:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
parentIframeResize()
carga del cuerpo para llamar , utilicé JQuery para capturar tanto la carga de la página como cualquier evento de cambio de tamaño:$(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);
esto me permite configurar el iframewidth="100%"
y si el ancho de la ventana cambia para ajustar el texto o algo así, el marco interno reconocerá que necesita ser redimensionado.Si no necesita manejar el contenido de iframe de un dominio diferente, pruebe este código, resolverá el problema por completo y es simple:
fuente
document.getElementById(id)
mensajes que tiene y simplificar el código.https://developer.mozilla.org/en/DOM/window.postMessage
La biblioteca iFrame-Resizer usa postMessage para mantener un iFrame dimensionado según su contenido, junto con MutationObserver para detectar cambios en el contenido y no depende de jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: bondad de scripting entre dominios
http://benalman.com/projects/jquery-postmessage-plugin/
Tiene demostración de redimensionar ventana de iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Este artículo muestra cómo eliminar la dependencia de jQuery ... Plus tiene mucha información útil y enlaces a otras soluciones.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Ejemplo de barebones ...
http://onlineaspect.com/uploads/postmessage/parent.html
Borrador de trabajo HTML 5 en window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig en mensajería cruzada
http://ejohn.org/blog/cross-window-messaging/
fuente
La forma más simple de usar jQuery:
fuente
La solución en http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html funciona muy bien (usa jQuery):
No sé si necesitas agregar 30 a la longitud ... 1 funcionó para mí.
FYI : Si ya tiene un atributo "height" en su iFrame, esto simplemente agrega style = "height: xxx". Esto podría no ser lo que quieres.
fuente
puede llegar un poco tarde, ya que todas las otras respuestas son anteriores :-) pero ... aquí está mi solución. Probado en FF real, Chrome y Safari 5.0.
css:
javascript:
Espero que esto ayude a cualquiera.
fuente
Finalmente encontré otra solución para enviar datos al sitio web principal desde iframe usando
window.postMessage(message, targetOrigin);
. Aquí explico cómo lo hice.Sitio A = http://foo.com Sitio B = http://bar.com
El sitio B se está cargando dentro del sitio Un sitio web
El sitio web de SiteB tiene esta línea
o
Entonces el sitio A tiene el siguiente código
Si desea agregar una conexión de seguridad, puede usar esto si la condición en
eventer(messageEvent, function (e) {})
Para IE
IFrame interior:
Fuera de:
fuente
Aquí hay una solución simple que utiliza una hoja de estilo generada dinámicamente que se sirve en el mismo servidor que el contenido del iframe. Simplemente, la hoja de estilo "sabe" qué hay en el iframe, y conoce las dimensiones que se usarán para diseñar el iframe. Esto evita las mismas restricciones de la política de origen.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Por lo tanto, el código iframe suministrado tendría una hoja de estilo que lo acompañaría así ...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" /> <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
Esto requiere que la lógica del lado del servidor pueda calcular las dimensiones del contenido representado del iframe.
fuente
Esta respuesta solo es aplicable para sitios web que usan Bootstrap. La función de inserción receptiva de Bootstrap hace el trabajo. Se basa en el ancho (no en la altura) del contenido.
jsfiddle: http://jsfiddle.net/00qggsjj/2/
http://getbootstrap.com/components/#responsive-embed
fuente
Estoy implementando la solución marco en marco de ConroyP para reemplazar una solución basada en la configuración de document.domain, pero descubrí que es bastante difícil determinar la altura del contenido del iframe correctamente en diferentes navegadores (probando con FF11, Ch17 e IE9 en este momento )
ConroyP utiliza:
Pero eso solo funciona en la carga de la página inicial. Mi iframe tiene contenido dinámico y necesito cambiar el tamaño del iframe en ciertos eventos.
Lo que terminé haciendo fue usar diferentes propiedades JS para los diferentes navegadores.
getBrowserData () es la función de detección del navegador "inspirada" en http://docs.sencha.com/core/source/Ext.html#method-Ext-apply de Ext Core
Eso funcionó bien para FF e IE, pero luego hubo problemas con Chrome. Uno de ellos era un problema de tiempo, aparentemente le toma un tiempo a Chrome configurar / detectar la altura del iframe. Y luego Chrome tampoco devolvió la altura del contenido en el iframe correctamente si el iframe era más alto que el contenido. Esto no funcionaría con contenido dinámico cuando se reduce la altura.
Para resolver esto, siempre configuro el iframe a una altura baja antes de detectar la altura del contenido y luego establecer la altura del iframe en su valor correcto.
El código no está optimizado, es de mi prueba de desarrollo :)
¡Espero que alguien encuentre esto útil!
fuente
fuente
Los gadgets de iGoogle tienen que implementar activamente el cambio de tamaño, por lo que supongo que en un modelo entre dominios no se puede hacer esto sin que el contenido remoto participe de alguna manera. Si su contenido puede enviar un mensaje con el nuevo tamaño a la página del contenedor utilizando técnicas típicas de comunicación entre dominios, entonces el resto es simple.
fuente
Cuando desee alejar una página web para ajustarla al tamaño del iframe:
Aquí hay un ejemplo:
fuente
Aquí hay un enfoque jQuery que agrega la información en json a través del atributo src del iframe. Aquí hay una demostración, redimensionar y desplazar esta ventana ... la url resultante con json se ve así ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
Aquí está el código fuente violín http://jsfiddle.net/zippyskippy/RJN3G/
fuente
obtener la altura del contenido del iframe y luego dárselo a este iframe
fuente
Trabajar con jquery en carga (navegador cruzado):
en cambiar el tamaño en la página receptiva:
fuente
Usando jQuery:
parent.html
child.html
fuente
Esto es un poco complicado, ya que debe saber cuándo se cargó la página del iframe, lo cual es difícil cuando no tiene el control de su contenido. Es posible agregar un controlador de carga al iframe, pero lo he intentado en el pasado y tiene un comportamiento muy diferente en todos los navegadores (sin adivinar quién es el más molesto ...). Probablemente tenga que agregar una función a la página de iframe que realiza el cambio de tamaño e inyectar algún script en el contenido que escucha cargar eventos o cambiar el tamaño de eventos, que luego llama a la función anterior. Estoy pensando en agregar una función a la página, ya que desea asegurarse de que sea segura, pero no tengo idea de lo fácil que será hacerlo.
fuente
Algo en este sentido, creo, debería funcionar.
Cargue esto con la carga de su cuerpo en el contenido del iframe.
fuente
Tengo una solución fácil y requiere que determine el ancho y la altura en el enlace, intente (funciona con la mayoría de los navegadores):
fuente