1

Tengo un problema, estoy creando por medio de JavaScript un iframe

var iframe = document.createElement("iframe");
  iframe.src = 'web.html';
  iframe.scrolling = 'no';
  iframe.style.width = options.width;
  iframe.style.border = 'none';
  iframe.style.overflow = 'hidden';
  iframe.id = 'ol-widget';
  element.appendChild(iframe);

Quiero obtener el Height de web.html y ponerlo en el iframe

2
  • necesariamente debe ser en javascript puro? o puedes utilizar JQuery?
    – Nazkter
    el 31 jul. 2017 a las 6:59
  • Solo javascript puro
    – Jadel
    el 31 jul. 2017 a las 16:47

1 respuesta 1

1

Como la altura del iframe no existe sino hasta que se ha cargado el contenido (html y css) primero debes dejar que cargue el contenido y luego actualizar el tamaño del iframe.

Para esto puedes poner un escuchador al evento "load" para que ejecuté una función:

iframe.addEventListener('load', actualizar_altura);

Luego definimos la función actualizar_altura() de la siguiente manera:

function actualizar_altura() {
    var iframe = document.getElementById('ol-widget');
    iframe.style.height = iframe.contentWindow.document.body.offsetHeight+'px';
}

Eso sería todo, coméntame si te sirvió, espero que soluciones tu problema.

4
  • Hola, viendo la consola me tira este error, Uncaught DOMException: Blocked a frame with origin "domain.com" from accessing a cross-origin frame.
    – Jadel
    el 31 jul. 2017 a las 16:48
  • @Jadel Esta solución únicamente funciona cuando el archivo web.html se encuentra en el mismo servidor (porque sino se aplicaría la capa de protección de CORS - Cross-origin resource sharing). por lo tanto al usar esta linea de código: iframe.src = 'web.html'; vas a necesitar que web.html se encuentre en el mismo servidor que esta corriendo tu programa.
    – Nazkter
    el 31 jul. 2017 a las 16:55
  • y como le hace facebook, para sus plugins ?
    – Jadel
    el 31 jul. 2017 a las 17:01
  • @Jadel hay que habilitar CORS para que se puedan hacer peticiones entre diferentes páginas (dominios) y tiene que estar habilitado en ambos lados, si la página que estas cargando en el iframe no es de tu propiedad, puede que ellos deshabiliten CORS y no puedas acceder a "document" por javascript (por seguridad). Te dejo un enlace que te guiará para habilitar CORS en diferentes servidores y lenguajes (esta en ingles, pero en español no hay uno tan completo): enable-cors.org/server.html
    – Nazkter
    el 31 jul. 2017 a las 17:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.