iFrame src thay đổi phát hiện sự kiện?

Giả sử tôi không có quyền kiểm soát nội dung trong iframe, có cách nào để tôi có thể phát hiện thay đổi src trong đó thông qua trang mẹ không? Một số loại tải có thể?

Phương pháp cuối cùng của tôi là thực hiện kiểm tra khoảng thời gian 1 giây nếu src iframe giống như trước đây, nhưng thực hiện giải pháp hacky này sẽ rất tệ.

Tôi đang sử dụng thư viện jQuery nếu nó giúp.

Bạn có thể muốn sử dụng onLoadsự kiện này, như trong ví dụ sau:

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

Cảnh báo sẽ bật lên bất cứ khi nào vị trí trong iframe thay đổi. Nó hoạt động trong tất cả các trình duyệt hiện đại, nhưng có thể không hoạt động trong một số trình duyệt cũ hơn như IE5 và Opera sớm. ( Nguồn )

Nếu iframe hiển thị một trang trong cùng một miền của cha mẹ , bạn sẽ có thể truy cập vị trí với contentWindow.location, như trong ví dụ sau:

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

Trả lời dựa trên JQuery <3

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

Như được đề cập bởi subharb, như từ JQuery 3.0, điều này cần được thay đổi thành:

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

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

Nếu bạn không có quyền kiểm soát trang và muốn xem một số thay đổi thì phương pháp hiện đại là sử dụng MutationObserver

Một ví dụ về việc sử dụng nó, xem srcthuộc tính để thay đổi mộtiframe

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>

Đầu ra sau 3 giây

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/ 

Trên jsFiddle

Câu trả lời được đăng ở đây vì câu hỏi ban đầu đã được đóng lại như một bản sao của câu hỏi này.

Lưu ý: Đoạn mã sẽ chỉ hoạt động nếu iframe có cùng nguồn gốc.

Các câu trả lời khác đã đề xuất loadsự kiện này, nhưng nó sẽ kích hoạt sau khi trang mới trong iframe được tải. Bạn có thể cần được thông báo ngay sau khi URL thay đổi , không phải sau khi trang mới được tải.

Đây là một giải pháp JavaScript đơn giản:

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>

Điều này sẽ theo dõi thành công các srcthay đổi thuộc tính, cũng như mọi thay đổi URL được thực hiện từ bên trong iframe.

Đã thử nghiệm trong tất cả các trình duyệt hiện đại.

Tôi đã thực hiện một ý chính với mã này là tốt. Bạn có thể kiểm tra câu trả lời khác của tôi quá. Nó đi sâu một chút vào cách thức hoạt động của nó.

Khung nội tuyến luôn giữ trang mẹ, bạn nên sử dụng trang này để phát hiện bạn đang ở trang nào trong iframe:

Mã 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);
    }

Kể từ phiên bản 3.0 của Jquery, bạn có thể gặp lỗi

LoạiError: url.indexOf không phải là một chức năng

Mà có thể dễ dàng sửa chữa bằng cách làm

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

Đây là phương thức được sử dụng trong Commerce SagePay và trong các mô-đun Drupal Commerce Paypoint về cơ bản so sánh document.location.hrefvới giá trị cũ bằng cách tải iframe của chính nó, sau đó là bên ngoài.

Vì vậy, về cơ bản, ý tưởng là tải trang trống dưới dạng giữ chỗ với mã JS riêng và biểu mẫu ẩn. Sau đó, mã JS mẹ sẽ gửi biểu mẫu ẩn đó trong đó #actionđiểm của nó tới iframe bên ngoài. Khi chuyển hướng / gửi xảy ra, mã JS vẫn đang chạy trên trang đó có thể theo dõi các document.location.hrefthay đổi giá trị của bạn .

Dưới đây là ví dụ JS được sử dụng trong iframe:

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

Và đây là JS được sử dụng trong trang mẹ:

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

Sau đó, trong trang đích trống tạm thời, bạn cần bao gồm biểu mẫu sẽ chuyển hướng đến trang bên ngoài.