Detecção de eventos de alteração do iFrame src?

Supondo que não tenho controle sobre o conteúdo do iframe, existe alguma maneira de detectar uma alteração de src na página pai? Algum tipo de carga, talvez?

Meu último recurso é fazer um teste de intervalo de 1 segundo se o iframe src for o mesmo de antes, mas fazer essa solução hacky seria péssimo.

Estou usando a biblioteca jQuery, se ajudar.

Você pode usar o onLoadevento, como no exemplo a seguir:

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

O alerta será exibido sempre que o local dentro do iframe for alterado. Ele funciona em todos os navegadores modernos, mas pode não funcionar em alguns navegadores mais antigos, como o IE5 e o Opera. ( Fonte )

Se o iframe estiver mostrando uma página no mesmo domínio do pai , você poderá acessar o local com contentWindow.location, como no exemplo a seguir:

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

Resposta baseada em JQuery <3

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

Conforme mencionado pelo subharb, a partir do JQuery 3.0, isso precisa ser alterado para:

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

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

Se você não tem controle sobre a página e deseja observar algum tipo de alteração, o método moderno é usar MutationObserver

Um exemplo de seu uso, observando o srcatributo mudar de umiframe

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>

Saída após 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/ 

On jsFiddle

A resposta postada aqui, pois a pergunta original foi encerrada como duplicata desta.

Nota: O snippet funcionaria apenas se o iframe estiver com a mesma origem.

Outras respostas propuseram o loadevento, mas ele é acionado após o carregamento da nova página no iframe. Pode ser necessário ser notificado imediatamente após a alteração do URL , não após o carregamento da nova página.

Aqui está uma solução JavaScript simples:

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>

Isso rastreará com êxito as srcalterações de atributo, bem como quaisquer alterações de URL feitas no próprio iframe.

Testado em todos os navegadores modernos.

Eu fiz uma essência com esse código também. Você pode verificar minha outra resposta também. Ele se aprofundou um pouco na maneira como isso funciona.

O iframe sempre mantém a página pai, você deve usá-lo para detectar em qual página você está no 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 a versão 3.0 do Jquery, você pode receber um erro

TypeError: url.indexOf não é uma função

O que pode ser facilmente corrigido fazendo

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

Aqui está o método usado nos módulos Commerce SagePay e Commerce Paypoint Drupal, que basicamente se comparam document.location.hrefao valor antigo, carregando primeiro seu próprio iframe, depois o externo.

Então, basicamente, a idéia é carregar a página em branco como um espaço reservado com seu próprio código JS e formulário oculto. O código JS pai enviará o formulário oculto onde #actionaponta para o iframe externo. Depois que o redirecionamento / envio acontece, o código JS que ainda está sendo executado nessa página pode rastrear suas document.location.hrefalterações de valor.

Aqui está o exemplo de JS usado no iframe:

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

E aqui está o JS usado na página pai:

;(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);

Em seguida, na página de destino temporária em branco, é necessário incluir o formulário que será redirecionado para a página externa.