ejemplos - ¿Devolución de llamada de Javascript cuando se terminó de cargar IFRAME?

javascript download

Question

Necesito ejecutar una devolución de llamada cuando un IFRAME ha terminado de cargarse. No tengo control sobre el contenido en el IFRAME, así que no puedo disparar la devolución de llamada desde allí.

Este IFRAME está creado programáticamente, y necesito pasar sus datos como una variable en la devolución de llamada, así como destruir el iframe.

¿Algunas ideas?

EDITAR:

Esto es lo que tengo ahora:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement(''IFRAME'');
    iFrameObj.src = url;            
    document.body.appendChild(iFrameObj);   

    $(iFrameObj).load(function() 
    {
        document.body.removeChild(iFrameObj);
        callback(iFrameObj.innerHTML);
    });
}

Esta devolución de llamada antes de que el iFrame se haya cargado, por lo que la devolución de llamada no tiene datos devueltos.

Answer 1

Creo que el evento de carga es correcto. Lo que no está bien es la forma en que utilizas para recuperar el contenido del contenido de iframe dom.

Lo que necesita es el html de la página cargada en el iframe, no el html del objeto iframe.

Lo que tiene que hacer es acceder al documento de contenido con iFrameObj.contentDocument . Esto devuelve el dom de la página cargada dentro del iframe, si está en el mismo dominio de la página actual.

Retiraría el contenido antes de eliminar el iframe.

He probado en Firefox y Opera.

Entonces creo que puede recuperar sus datos con $(childDom).html() o $(childDom).find(''some selector'') ...

Answer 2

El HTML interno de su iframe está en blanco porque su etiqueta iframe no rodea ningún contenido en el documento principal. Para obtener el contenido de la página a la que hace referencia el atributo src del iframe, debe acceder a la propiedad contentDocument del iframe. Se lanzará una excepción si el src es de un dominio diferente. Esta es una función de seguridad que le impide ejecutar JavaScript arbitrario en la página de otra persona, lo que crearía una vulnerabilidad de scripts entre sitios. Aquí hay un código de ejemplo que ilustra de lo que estoy hablando:

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script>

<h1>Parent</h1>

<script type="text/javascript">
function on_load(iframe) {
  try {
    // Displays the first 50 chars in the innerHTML of the
    // body of the page that the iframe is showing.
    // EDIT 2012-04-17: for wider support, fallback to contentWindow.document
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    alert(doc.body.innerHTML.substring(0, 50));
  } catch (e) {
    // This can happen if the src of the iframe is
    // on another domain
    alert(''exception: '' + e);
  }
}
</script>
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>

Para ampliar el ejemplo, intente usar esto como el contenido del iframe:

<h1>Child</h1>

<a href="http://www.google.com/">Google</a>

<p>Use the preceeding link to change the src of the iframe
to see what happens when the src domain is different from
that of the parent page</p>

Answer 3

Estoy usando jQuery y, sorprendentemente, esto parece cargarse, ya que acabo de probar y cargar una página pesada y no recibí la alerta durante unos segundos hasta que vi la carga del iframe:

$(''#the_iframe'').load(function(){
    alert(''loaded!'');
});

Por lo tanto, si no desea utilizar jQuery, eche un vistazo a su código fuente y vea si esta función se comporta de manera diferente con los elementos DOM del iframe. Lo veré yo mismo más adelante, ya que estoy interesado y publico aquí. También solo probé en el último chrome.

Answer 4

He tenido exactamente el mismo problema en el pasado y la única forma que encontré para solucionarlo fue agregar la devolución de llamada a la página iframe. Por supuesto, eso solo funciona cuando tienes control sobre el contenido del iframe.

Answer 5

Primero, yendo por el nombre de la función xssRequest suena como si estuvieras intentando una solicitud cruzada, que si es así, no podrás leer el contenido del iframe.

Por otro lado, si la URL del iframe está en su dominio, puede acceder al cuerpo, pero descubrí que si uso un tiempo de espera para eliminar el iframe, la devolución de llamada funciona bien:

// possibly excessive use of jQuery - but I''ve got a live working example in production
$(''#myUniqueID'').load(function () {
  if (typeof callback == ''function'') {
    callback($(''body'', this.contentWindow.document).html());
  }
  setTimeout(function () {$(''#frameId'').remove();}, 50);
});

Answer 6

Quería ocultar el spinner div que esperaba cuando el contenido de i frame está completamente cargado en IE, probé literalmente todas las soluciones mencionadas en .Com, pero sin nada funcionó como yo quería.

Luego tuve una idea, que cuando el contenido de i frame está completamente cargado, el evento de carga de $ (Windows) podría dispararse. Y eso exactamente lo que sucedió. Entonces, escribí este pequeño guión, y funcionó como magia:

     $(window).load(function () {
     //alert("Done window ready ");
     var lblWait = document.getElementById("lblWait");
     if (lblWait != null ) {
         lblWait.style.visibility = "false";
         document.getElementById("divWait").style.display = "none";
     }
 });

Espero que esto ayude.

Answer 7

Tengo un código similar en mis proyectos que funciona bien. Al adaptar mi código a su función, una solución podría ser la siguiente:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement(''IFRAME'');
    iFrameObj.id = ''myUniqueID'';
    document.body.appendChild(iFrameObj);       
    iFrameObj.src = url;                        

    $(iFrameObj).load(function() 
    {
        callback(window[''myUniqueID''].document.body.innerHTML);
        document.body.removeChild(iFrameObj);
    });
}

Tal vez tengas un innerHTML vacío porque (una o ambas causas): 1. debes usarlo contra el elemento del cuerpo 2. has eliminado el iframe de tu página DOM

Answer 8

Tuve que hacer esto en los casos en que los documentos como word docs y pdfs se transmitían al iframe y encontré una solución que funciona bastante bien. La clave es manejar el evento onreadystatechanged en el iframe.

Digamos que el nombre de su marco es "myIframe". Primero en algún lugar del inicio de su código (lo hago en línea en cualquier lugar después del iframe) agregue algo como esto para registrar el controlador de eventos:

document.getElementById(''myIframe'').onreadystatechange = MyIframeReadyStateChanged;

No pude usar un atributo onreadystatechage en el iframe, no puedo recordar por qué, pero la aplicación tuvo que funcionar en IE 7 y Safari 3, por lo que puede haber sido un factor.

Aquí hay un ejemplo de cómo obtener el estado completo:

function MyIframeReadyStateChanged()
{
    if(document.getElementById(''myIframe'').readyState == ''complete'')
    {
        // Do your complete stuff here.
    }
}

Answer 9

Tuve un problema similar al tuyo. Lo que hice fue que utilicé algo llamado jQuery. Lo que haces luego en el código javascript es esto:

$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page.

    $("#myIframeId").load(function(){
       callback($("#myIframeId").html());
       $("#myIframeId").remove();

    });

});

Parece que borras tu iFrame antes de tomar el html de él. Ahora, veo un problema con eso: p

Espero que esto ayude :).

Answer 10

Usar onload attrbute resolverá tu problema.

Aquí hay un ejemplo.

function a() {
alert("Your iframe has been loaded");
}

<iframe src="https://.com" onload="a()"></iframe>

¿Es esto lo que quieres?

Haga clic aquí para más información.