javascript - bootstrap - iframe video
Cambiar el tamaño de la altura del iframe de dominios cruzados (6)
Estoy tratando de cambiar el parámetro de altura del iframe por el mismo px de la página que se está cargando dentro del iframe. La página que se está cargando en el iframe proviene de otro dominio.
Se cargarán diferentes páginas dentro del iframe, lo que ocasionará que la altura del contenido del iframe cambie, así que tendré que tomar el alto del contenido del iframe y aplicarlo al parámetro de altura del iframe.
Aquí un ejemplo de lo que estoy hablando: http://jsfiddle.net/R7Yz9/3/
<div class="site"><a href="http://amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
.
$(document).ready(function() {
var iframe = $( "#source" );
$( "a[target=_top]" ).click( function(){
iframe.attr( "src", this.href );
return false;
});
});
Aquí hay una pequeña biblioteca que resuelve todos los problemas con el tamaño de iFrames a su contenido contenido.
https://github.com/davidjbradshaw/iframe-resizer
Se ocupa del problema del dominio cruzado mediante el uso de la API posterior al mensaje, y también detecta cambios en el contenido del iFrame de diferentes maneras.
Funciona en todos los navegadores modernos e IE8 en adelante.
EDITAR: Para que se determinen las alturas de iframe entre dominios, también debe tener acceso para implementar una secuencia de comandos en la página del iframe.
Conjunto mínimo de dominios cruzados que he utilizado para incrustar un iframe individual ajustado en una página.
En la página de inserción (que contiene iframe):
<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
<script type="text/javascript">
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
// replace #sizetracker with what ever what ever iframe id you need
document.getElementById(''sizetracker'').style.height = e.data + ''px'';
}, false);
</script>
En la página incrustada (iframe):
<script type="text/javascript">
function sendHeight()
{
if(parent.postMessage)
{
// replace #wrapper with element that contains
// actual page content
var height= document.getElementById(''wrapper'').offsetHeight;
parent.postMessage(height, ''*'');
}
}
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
sendHeight();
},
false);
</script>
Debe tener acceso también en el sitio que va a encuadrar. Encontré la mejor solución aquí: https://gist.github.com/MateuszFlisikowski/91ff99551dcd90971377
yourotherdomain.html
<script type=''text/javascript'' src="js/jquery.min.js"></script>
<script type=''text/javascript''>
// Size the parent iFrame
function iframeResize() {
var height = $(''body'').outerHeight(); // IMPORTANT: If body''s height is set to 100% with CSS this will not work.
parent.postMessage("resize::"+height,"*");
}
$(document).ready(function() {
// Resize iframe
setInterval(iframeResize, 1000);
});
</script>
su sitio web con iframe
<iframe src=''example.html'' id=''edh-iframe''></iframe>
<script type=''text/javascript''>
// Listen for messages sent from the iFrame
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
// If the message is a resize frame request
if (e.data.indexOf(''resize::'') != -1) {
var height = e.data.replace(''resize::'', '''');
document.getElementById(''edh-iframe'').style.height = height+''px'';
}
} ,false);
</script>
No hay opciones en javascript para encontrar el alto de una altura de iframe de dominios cruzados, pero puede hacer algo como esto con la ayuda de alguna programación del lado del servidor. Usé PHP para este ejemplo
<code>
<?php
$output = file_get_contents(''http://yourdomain.com'');
?>
<div id=''iframediv''>
<?php echo $output; ?>
</div>
<iframe style=''display:none'' id=''iframe'' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>
<script>
if(window.attachEvent) {
window.attachEvent(''onload'', iframeResizer);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
iframeResizer(evt);
};
window.onload = newonload;
} else {
window.onload = iframeResizer;
}
}
function iframeResizer(){
var result = document.getElementById("iframediv").offsetHeight;
document.getElementById("iframe").style.height = result;
document.getElementById("iframediv").style.display = ''none'';
document.getElementById("iframe").style.display = ''inline'';
}
</script>
</code>
Obtienes la altura de contenido de un iframe como esta:
iframe.contentWindow.document.body.scrollHeight
ACTUALIZAR
Sin embargo, puede haber problemas con el dominio cruzado. Aquí hay 3 fuentes que muestran diferentes enfoques:
http://css-tricks.com/cross-domain-iframe-resizing/
Cómo obtener la altura del dominio cruzado iframe
Obtener valor del campo de entrada dentro de un iframe
Nota: este último muestra cómo acceder a un campo, pero el principio es el mismo para acceder a la altura de un cuerpo
Si tiene acceso para manipular el código del sitio que está cargando, lo siguiente debería proporcionar un método exhaustivo para actualizar la altura del contenedor de iframe cualquier momento que cambie el alto del contenido enmarcado.
Agregue el siguiente código a las páginas que está cargando (quizás en un encabezado). Este código envía un mensaje que contiene la altura del contenedor HTML cada vez que se actualiza el DOM (si está cargando de forma diferida) o la ventana cambia de tamaño (cuando el usuario modifica el navegador).
window.addEventListener("load", function(){
if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe
send_height_to_parent_function = function(){
var height = document.getElementsByTagName("html")[0].clientHeight;
//console.log("Sending height as " + height + "px");
parent.postMessage({"height" : height }, "*");
}
// send message to parent about height updates
send_height_to_parent_function(); //whenever the page is loaded
window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
var observer = new MutationObserver(send_height_to_parent_function); // whenever DOM changes PT1
var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
observer.observe(window.document, config); // PT3
});
Agregue el siguiente código a la página en la que está almacenado el iframe. Esto actualizará la altura del iframe, dado que el mensaje proviene de la página que ese iframe carga.
<script>
window.addEventListener("message", function(e){
var this_frame = document.getElementById("healthy_behavior_iframe");
if (this_frame.contentWindow === e.source) {
this_frame.height = e.data.height + "px";
this_frame.style.height = e.data.height + "px";
}
})
</script>