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

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

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

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

Источник

7 ответов

Решение

Вы можете использовать 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>
Источник

Ответ основан на JQuery < 3

$('#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/

Источник

Если у вас нет контроля над страницей и вы хотите следить за изменениями, то современный метод заключается в использовании 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

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

Источник

Другие ответы предложили 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 имеет одинаковое происхождение.

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

Источник

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);
    }
Источник

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

Ошибка типа: url.indexOf не является функцией

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

$('#iframe').on('load', function() {
    alert('frame has (re)loaded ');
});
Источник

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

Таким образом, в основном идея состоит в том, чтобы загрузить пустую страницу как заполнитель со своим собственным JS-кодом и скрытой формой. Тогда родительский код JS отправит эту скрытую форму, где его #action указывает на внешний фрейм. Как только произойдет перенаправление / отправка, код 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);

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

Источник
Другие вопросы по тегам