javascript - div - iFrame src ¿cambio de detección de evento?

jquery load image

Question

Suponiendo que no tengo control sobre el contenido en el iframe, ¿hay alguna manera de que pueda detectar un cambio src en él a través de la página padre? Algún tipo de carga tal vez?

Mi último recurso es hacer una prueba de intervalo de 1 segundo si el iframe src es el mismo que antes, pero hacer esta solución hacky sería desagradable.

Estoy usando la biblioteca jQuery si ayuda.

Answer 1

Desde la versión 3.0 de Jquery es posible que obtenga un error

TypeError: url.indexOf no es una función

Que se puede arreglar fácilmente haciendo

$(''#iframe'').on(''load'', function() {
    alert(''frame has (re)loaded '');
});

Answer 2

El iframe siempre conserva la página principal, debe usar esto para detectar en qué página se encuentra el iframe:

Código HTML:

<iframe id="iframe" frameborder="0" scrolling="no" onload="resizeIframe(this)" width="100%" src="www.google.com"></iframe>

Js:

    function resizeIframe(obj) {
        alert(obj.contentWindow.location.pathname);
    }

Answer 3

Es posible que desee utilizar el evento onLoad , como en el siguiente ejemplo:

<iframe src="http://www.google.com/" onLoad="alert(''Test'');"></iframe>

La alerta aparecerá cuando la ubicación dentro del iframe cambie. Funciona en todos los navegadores modernos, pero puede no funcionar en algunos navegadores muy antiguos como IE5 y principios de Opera. ( Source )

Si el iframe muestra una página dentro del mismo dominio del principal , podrá acceder a la ubicación con contentWindow.location , como en el siguiente ejemplo:

<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>

Answer 4

Este es el método que se usa en Commerce SagePay y en los módulos de Commerce Paypoint Drupal que básicamente compara document.location.href con el valor anterior cargando primero su propio iframe, luego el externo.

Entonces, básicamente, la idea es cargar la página en blanco como un marcador de posición con su propio código JS y forma oculta. Entonces, el código JS padre enviará ese formulario oculto donde su #action apunta al iframe externo. Una vez que se produce el redireccionamiento / envío, el código JS que aún se está ejecutando en esa página puede rastrear los cambios en el valor de document.location.href .

Aquí está el ejemplo JS utilizado en iframe:

;(function($) {
  Drupal.behaviors.commercePayPointIFrame = {
    attach: function (context, settings) {
      if (top.location != location) {
        $(''html'').hide();
        top.location.href = document.location.href;
      }
    }
  }
})(jQuery);

Y aquí se usa JS en la página principal:

;(function($) {
  /**
   * Automatically submit the hidden form that points to the iframe.
   */
  Drupal.behaviors.commercePayPoint = {
    attach: function (context, settings) {
      $(''div.payment-redirect-form form'', context).submit();
      $(''div.payment-redirect-form #edit-submit'', context).hide();
      $(''div.payment-redirect-form .checkout-help'', context).hide();
    }
  }
})(jQuery);

Luego, en la página de destino temporal en blanco, debe incluir el formulario que lo redireccionará a la página externa.

Answer 5

Otras respuestas propusieron el evento de load , pero se dispara después de que se carga la nueva página en el iframe. Es posible que deba recibir una notificación inmediatamente después de que la URL cambie , no después de que se cargue la nueva página.

Aquí hay una solución simple de JavaScript:

function iframeURLChange(iframe, callback) {
    var unloadHandler = function () {
        // Timeout needed because the URL changes immediately after
        // the `unload` event is dispatched.
        setTimeout(function () {
            callback(iframe.contentWindow.location.href);
        }, 0);
    };

    function attachUnload() {
        // Remove the unloadHandler in case it was already attached.
        // Otherwise, the change will be dispatched twice.
        iframe.contentWindow.removeEventListener("unload", unloadHandler);
        iframe.contentWindow.addEventListener("unload", unloadHandler);
    }

    iframe.addEventListener("load", attachUnload);
    attachUnload();
}

iframeURLChange(document.getElementById("mainframe"), function (newURL) {
    console.log("URL changed:", newURL);
});

<iframe id="mainframe" src=""></iframe>

Esto hará un seguimiento exitoso de los cambios de los atributos de src , así como de los cambios de URL realizados dentro del propio iframe.

Probado en todos los navegadores modernos.

Nota: El fragmento de arriba solo funcionaría si el iframe tiene el mismo origen.

También hice una gist con este código. Puedes consultar mi otra answer también. Va un poco en profundidad sobre cómo funciona esto.

Answer 6

Respuesta basada en JQuery <3

$(''#iframeid'').load(function(){
    alert(''frame has (re)loaded'');
});

Como se menciona en subharb, a partir de JQuery 3.0 esto debe cambiarse a:

$(''#iframe'').on(''load'', function() {
    alert(''frame has (re)loaded '');
});

https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Answer 7

Si no tiene control sobre la página y desea observar algún tipo de cambio, entonces el método moderno es usar MutationObserver

Un ejemplo de su uso, observando que el atributo src cambie de un iframe

new MutationObserver(function(mutations) {
  mutations.some(function(mutation) {
    if (mutation.type === ''attributes'' && mutation.attributeName === ''src'') {
      console.log(mutation);
      console.log(''Old src: '', mutation.oldValue);
      console.log(''New src: '', mutation.target.src);
      return true;
    }

    return false;
  });
}).observe(document.body, {
  attributes: true,
  attributeFilter: [''src''],
  attributeOldValue: true,
  characterData: false,
  characterDataOldValue: false,
  childList: false,
  subtree: true
});

setTimeout(function() {
  document.getElementsByTagName(''iframe'')[0].src = ''http://jsfiddle.net/'';
}, 3000);

<iframe src="http://www.google.com"></iframe>

Salida después de 3 segundos

MutationRecord {oldValue: "http://www.google.com", attributeNamespace: null, attributeName: "src", nextSibling: null, previousSibling: null…}
Old src:  http://www.google.com
New src:  http://jsfiddle.net/ 

En jsFiddle

Se envió respuesta aquí porque la pregunta original se cerró como duplicado de esta.