iFrame src detección de eventos de cambio?

Suponiendo que no tengo control sobre el contenido en el iframe, ¿hay alguna forma de detectar un cambio de src en él a través de la página principal? ¿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 era antes, pero hacer esta solución hacky sería una mierda.

Estoy usando la biblioteca jQuery si me ayuda.

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

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

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

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

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

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

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

Un ejemplo de su uso, observando el srccambio del atributo de uniframe

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

La respuesta publicada aquí como pregunta original se cerró como un duplicado de esta.

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

Otras respuestas propusieron el loadevento, 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 cambie la URL , no después de cargar 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 rastreará con éxito los srccambios de atributos, así como cualquier cambio de URL realizado desde el propio iframe.

Probado en todos los navegadores modernos.

También hice una idea general con este código. Puedes consultar mi otra respuesta también. Se profundiza un poco en cómo funciona esto.

El iframe siempre mantiene la página principal, debe usar esto para detectar en qué página se encuentra en 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);
    }

Desde la versión 3.0 de Jquery, puede obtener un error

TypeError: url.indexOf no es una función

Que se puede solucionar fácilmente haciendo

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

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

Básicamente, la idea es cargar la página en blanco como marcador de posición con su propio código JS y forma oculta. Luego, el código JS principal enviará ese formulario oculto donde #actionapunta al iframe externo. Una vez que se produce la redirección / envío, el código JS que aún se ejecuta en esa página puede rastrear sus document.location.hrefcambios de valor.

Aquí hay un ejemplo de 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 redirigirá a la página externa.