Nắm bắt sự kiện tải hoàn thành iframe

Có cách nào để chụp khi nội dung của iframe đã được tải đầy đủ từ trang mẹ không?

<iframe>các yếu tố có một loadsự kiện cho điều đó.

Cách bạn nghe sự kiện đó là tùy thuộc vào bạn, nhưng nói chung cách tốt nhất là:

1) tạo iframe của bạn theo chương trình

Nó đảm bảo rằng trình loadnghe của bạn luôn được gọi bằng cách đính kèm trước khi iframe bắt đầu tải.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) javascript nội tuyến , là một cách khác mà bạn có thể sử dụng bên trong đánh dấu HTML của mình.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Bạn cũng có thể đính kèm trình lắng nghe sự kiện sau phần tử , bên trong <script>thẻ, nhưng hãy nhớ rằng trong trường hợp này, có một khả năng nhỏ là iframe đã được tải vào thời điểm bạn thêm trình nghe của mình. Do đó, có thể nó sẽ không được gọi (ví dụ: nếu iframe rất nhanh hoặc đến từ bộ đệm).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Cũng xem câu trả lời khác của tôi về yếu tố nào cũng có thể kích hoạt loại loadsự kiện này

Cả hai câu trả lời trên đều không có tác dụng với tôi, tuy nhiên điều này đã làm

CẬP NHẬT :

Như @doppleganger đã chỉ ra bên dưới, tải đã hết từ jQuery 3.0, vì vậy đây là phiên bản cập nhật sử dụng on. Xin lưu ý rằng điều này thực sự sẽ hoạt động trên jQuery 1.7+, vì vậy bạn có thể triển khai theo cách này ngay cả khi bạn chưa sử dụng jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});

Có một cách nhất quán khác ( chỉ dành cho IE9 + ) trong JavaScript vanilla cho việc này:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

Và nếu bạn quan tâm đến Đài quan sát thì đây là mẹo:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

Lưu ý rằng sự kiện onload dường như không kích hoạt nếu iframe được tải khi ngoài màn hình. Điều này thường xảy ra khi sử dụng tab "Mở trong cửa sổ mới" / w.

Bạn cũng có thể chụp sự kiện sẵn sàng jquery theo cách này:

$('#iframeid').ready(function () {
//Everything you need.
});

Dưới đây là một ví dụ hoạt động:

http://jsfiddle.net/ZrFzF/