iFrame src обнаружение события изменения?

Question

Если я не контролирую содержимое в iframe, могу ли я обнаружить изменение src в нем через родительскую страницу? Может быть, какая-то нагрузка?

Мое последнее средство - сделать 1-секундный интервальный тест, если iframe src такой же, как и раньше, но выполнение этого хакерского решения будет неудачным.

Я использую библиотеку jQuery, если это поможет.

Answer 1

Вы можете использовать событие onLoad, как в следующем примере:

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

Предупреждение появляется при каждом изменении местоположения в iframe. Он работает во всех современных браузерах, но может не работать в некоторых очень старых браузерах, таких как IE5 и ранняя версия Opera. ( Источник )

Если iframe показывает страницу в том же домене родительского , вы сможете получить доступ к местоположению с помощью contentWindow.location, как в следующем примере:

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

Answer 2

Ответ основан на JQuery <3 </p>

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

Как упомянуто subharb, начиная с JQuery 3.0 это необходимо изменить на:

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

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

Answer 3

Если у вас нет контроля над страницей и вы хотите следить за изменениями, то современный метод - использовать MutationObserver

Пример его использования, отслеживание изменения атрибута src на 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>

Выход через 3 секунды

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/ 

Вкл. jsFiddle

Отправленный ответ здесь как оригинальный вопрос был закрыт как дубликат этого.

Answer 4

iframe всегда сохраняет родительскую страницу, вы должны использовать это, чтобы определить, на какой странице вы находитесь в iframe:

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 5

В других ответах предлагалось событие load, но оно запускает после загрузки новой страницы в iframe. Может потребоваться уведомление сразу после изменения URL-адреса , а не после загрузки новой страницы.

Вот простое решение 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>

Это будет успешно отслеживать изменения атрибута src, а также любые изменения URL, сделанные внутри самого iframe.

Проверено во всех современных браузерах.

Примечание: Приведенный выше фрагмент будет работать только в том случае, если iframe имеет то же происхождение.

Я также сделал гист с этим кодом. Вы можете проверить мой другой ответ тоже. Это немного углубляется в то, как это работает.

Answer 6

Начиная с версии 3.0 Jquery вы можете получить ошибку

TypeError: url.indexOf не является функцией

Что можно легко исправить, выполнив

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

Answer 7

Вот метод, который используется в Commerce SagePay и в Commerce Paypoint Drupal, который в основном сравнивает document.location.href со старым значением, сначала загружая его собственный iframe, затем внешний один.

Таким образом, основная идея состоит в том, чтобы загрузить пустую страницу как заполнитель со своим собственным JS-кодом и скрытой формой. Затем родительский код JS отправит эту скрытую форму, где его #action указывает на внешний iframe. Как только происходит перенаправление / отправка, код JS, который все еще работает на этой странице, может отслеживать ваши document.location.href изменения значения.

Вот пример JS, используемый в iframe:

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

А вот JS используется на родительской странице:

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

Затем во временную пустую целевую страницу необходимо включить форму, которая будет перенаправлять на внешнюю страницу.