Détection des événements de changement de src d'iFrame ?

Question

En supposant que je n'ai aucun contrôle sur le contenu de l'iframe, y a-t-il un moyen de détecter un changement de src via la page parent ? Une sorte de onload peut-être ?

Mon dernier recours est de faire un test à intervalle d'une seconde pour voir si la src de l'iframe est la même qu'avant, mais faire cette solution de fortune serait nul.

J'utilise la bibliothèque jQuery si cela peut aider.

Answer 1

Depuis la version 3.0 de Jquery, vous pouvez obtenir une erreur

TypeError : url.indexOf n'est pas une fonction

Ce qui peut être facilement corrigé en faisant

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

Answer 2

Voici la méthode qui est utilisée dans Commerce SagePay et en Commerce Paypoint Modules Drupal qui comparent essentiellement document.location.href avec l'ancienne valeur en chargeant d'abord sa propre iframe, puis une iframe externe.

En gros, l'idée est de charger la page blanche comme un espace réservé avec son propre code JS et un formulaire caché. Ensuite, le code JS parent soumettra ce formulaire caché où son #action pointe vers l'iframe externe. Une fois que la redirection/soumission a lieu, le code JS qui est toujours en cours d'exécution sur cette page peut suivre votre document.location.href les changements de valeur.

Voici un exemple de JS utilisé dans une iframe :

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

Et voici le JS utilisé dans la page parent :

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

Ensuite, dans la page de renvoi temporaire vierge, vous devez inclure le formulaire qui redirigera vers la page externe.