origin - postmessage from iframe to parent
¿Existe un auto-ajuste de tamaño de iframe de altura entre dominios que funcione? (6)
Aquí está mi solución simple en esta página. http://lab.ohshiftlabs.com/iframesize/
Así es como funciona;
Básicamente, si puede editar una página en otro dominio, puede colocar otra página de iframe que pertenece a su servidor, lo que ahorra altura a las cookies. Con un intervalo de lectura de cookies cuando se actualiza, actualice la altura del iframe. Eso es todo.
Descargar; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip
Intenté algunas soluciones pero no tuve éxito. Me pregunto si existe una solución, preferiblemente con un tutorial fácil de seguir.
Encontré otra solución del lado del servidor para el desarrollador web usando PHP para obtener el tamaño de un iframe.
Lo primero es usar el PHP del script del servidor a una llamada externa a través de una función interna: (como un file_get_contents con pero curl y dom).
function curl_get_file_contents($url,$proxyActivation=false) {
global $proxy;
$c = curl_init();
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
curl_setopt($c, CURLOPT_REFERER, $url);
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
if($proxyActivation) {
curl_setopt($c, CURLOPT_PROXY, $proxy);
}
$contents = curl_exec($c);
curl_close($c);
$dom = new DOMDocument();
$dom->preserveWhiteSpace = false;
@$dom->loadHTML($contents);
$form = $dom->getElementsByTagName("body")->item(0);
if ($contents) //si on a du contenu
return $dom->saveHTML();
else
return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
#iframe_reserve {
width: 560px;
height: 228px
}
</style>
</head>
<body>
<div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>
<iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="overflow:none; width:100%; display:none"></iframe>
<script type="text/javascript">
window.onload = function(){
document.getElementById("iframe_reserve").style.display = "block";
var divHeight = document.getElementById("iframe_reserve").clientHeight;
document.getElementById("iframe_reserve").style.display = "none";
document.getElementById("myiframe").style.display = "block";
document.getElementById("myiframe").style.height = divHeight;
alert(divHeight);
};
</script>
</body>
</html>
Deberá mostrar debajo del div ( iframe_reserve ) el html generado por la llamada a la función utilizando un echo curl_get_file_contents("location url iframe","activation proxy") simple echo curl_get_file_contents("location url iframe","activation proxy")
Después de hacer esto, una función de eventos corporales onload con javascript toma la altura del iframe de la página solo con un control simple del contenido div ( iframe_reserve )
Así que utilicé divHeight = document.getElementById("iframe_reserve").clientHeight; para obtener la altura de la página externa vamos a llamar después de enmascarar el contenedor div ( iframe_reserve ). Después de esto, cargamos el iframe con su buena altura, eso es todo.
Lo que hice fue comparar el iframe scrollWidth hasta que cambió de tamaño mientras establecí incrementalmente la altura del iframe. Y funcionó bien para mí. Puede ajustar el incremento a lo que desee.
<script type="text/javascript">
function AdjustIFrame(id) {
var frame = document.getElementById(id);
var maxW = frame.scrollWidth;
var minW = maxW;
var FrameH = 100; //IFrame starting height
frame.style.height = FrameH + "px"
while (minW == maxW) {
FrameH = FrameH + 100; //Increment
frame.style.height = FrameH + "px";
minW = frame.scrollWidth;
}
}
</script>
<iframe id="RefFrame" onload="AdjustIFrame(''RefFrame'');" class="RefFrame"
src="http://www.YourUrl.com"></iframe>
Obtuve la solución para establecer la altura del iframe de forma dinámica en función de su contenido. Esto funciona para el contenido de dominio cruzado. Hay algunos pasos a seguir para lograr esto.
Supongamos que ha agregado iframe en la página web "abc.com/page"
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>A continuación, debe vincular el evento "mensaje" de Windows en la página web "abc.com/page"
window.addEventListener(''message'', function (event) {
//Here We have to check content of the message event for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
//Set height of the Iframe
$("#IframeId").css("height", event.data.FrameHeight);
}
});
On iframe load you have to send message to iframe window content with "FrameHeight" message
function setIframeHeight(ifrm) {
var height = ifrm.contentWindow.postMessage("FrameHeight", "*");
}
- En la página principal que se agregó debajo del iframe aquí "xyz.pqr / contactpage", debe vincular el evento de "mensaje" de Windows donde todos los mensajes van a recibir desde la ventana principal de "abc.com/page"
window.addEventListener(''message'', function (event) {
// Need to check for safty as we are going to process only our messages
// So Check whether event with data(which contains any object) contains our message here its "FrameHeight"
if (event.data == "FrameHeight") {
//event.source contains parent page window object
//which we are going to use to send message back to main page here "abc.com/page"
//parentSourceWindow = event.source;
//Calculate the maximum height of the page
var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
// Send height back to parent page "abc.com/page"
event.source.postMessage({ "FrameHeight": height }, "*");
}
});
Finalmente, la altura de su iframe se establecerá en la carga del iframe.
¡Feliz codificación!
Tengo un script que cae en el iframe con su contenido. También se asegura de que iFrameResizer exista (lo inyecta como un script) y luego cambia el tamaño.
Presentaré un ejemplo simplificado a continuación.
// /js/embed-iframe-content.js
(function(){
// Note the id, we need to set this correctly on the script tag responsible for
// requesting this file.
var me = document.getElementById(''my-iframe-content-loader-script-tag'');
function loadIFrame() {
var ifrm = document.createElement(''iframe'');
ifrm.id = ''my-iframe-identifier'';
ifrm.setAttribute(''src'', ''http://www.google.com'');
ifrm.style.width = ''100%'';
ifrm.style.border = 0;
// we initially hide the iframe to avoid seeing the iframe resizing
ifrm.style.opacity = 0;
ifrm.onload = function () {
// this will resize our iframe
iFrameResize({ log: true }, ''#my-iframe-identifier'');
// make our iframe visible
ifrm.style.opacity = 1;
};
me.insertAdjacentElement(''afterend'', ifrm);
}
if (!window.iFrameResize) {
// We first need to ensure we inject the js required to resize our iframe.
var resizerScriptTag = document.createElement(''script'');
resizerScriptTag.type = ''text/javascript'';
// IMPORTANT: insert the script tag before attaching the onload and setting the src.
me.insertAdjacentElement(''afterend'', ifrm);
// IMPORTANT: attach the onload before setting the src.
resizerScriptTag.onload = loadIFrame;
// This a CDN resource to get the iFrameResizer code.
// NOTE: You must have the below "coupled" script hosted by the content that
// is loaded within the iframe:
// https://unpkg.com/[email protected]/js/iframeResizer.contentWindow.min.js
resizerScriptTag.src = ''https://unpkg.com/[email protected]/js/iframeResizer.min.js'';
} else {
// Cool, the iFrameResizer exists so we can just load our iframe.
loadIFrame();
}
}())
Luego, el contenido del iframe se puede inyectar en cualquier lugar dentro de otra página / sitio usando el script de esta manera:
<script
id="my-iframe-content-loader-script-tag"
type="text/javascript"
src="/js/embed-iframe-content.js"
></script>
El contenido del iframe se insertará a continuación donde coloque la etiqueta del script.
Espero que esto sea útil para alguien. 👍
Tienes tres alternativas:
1. Use iFrame-resizer
Esta es una biblioteca simple para mantener los iFrames del tamaño de su contenido. Utiliza las API PostMessage y MutationObserver, con retrocesos para IE8-10. También tiene opciones para que la página de contenido solicite que el iFrame que lo contiene tenga un cierto tamaño y también puede cerrar el iFrame cuando haya terminado con él.
http://davidjbradshaw.github.io/iframe-resizer/
2. Utilice Easy XDM (combo PostMessage + Flash)
Easy XDM utiliza una colección de trucos para permitir la comunicación entre dominios entre diferentes ventanas en varios navegadores, y hay ejemplos para usarlo para cambiar el tamaño del iframe:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM funciona utilizando PostMessage en navegadores modernos y una solución basada en Flash como respaldo para navegadores más antiguos.
Ver también este hilo en (también hay otros, esta es una pregunta frecuente). Además, Facebook parece usar un enfoque similar .
3. Comunícate a través de un servidor
Otra opción sería enviar la altura del iframe a su servidor y luego sondear desde ese servidor desde la página web principal con JSONP (o usar una encuesta larga si es posible).