Phát hiện khi nội dung Iframe đã tải (Trình duyệt chéo)

Tôi đang cố gắng phát hiện khi một iframe và nội dung của nó đã tải nhưng không gặp nhiều may mắn. Ứng dụng của tôi nhận một số đầu vào trong các trường văn bản trong cửa sổ mẹ và cập nhật iframe để cung cấp 'bản xem trước trực tiếp'

Tôi đã bắt đầu với mã sau (YUI) để phát hiện khi sự kiện tải iframe xảy ra.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'khung xem trước' là ID của khung nội tuyến của tôi và tôi đang sử dụng YUI để đính kèm trình xử lý sự kiện. Tuy nhiên, việc cố gắng truy cập phần nội dung trong lệnh gọi lại của tôi (khi tải iframe) không thành công, tôi nghĩ vì iframe tải trước khi trình xử lý sự kiện sẵn sàng. Mã này hoạt động nếu tôi trì hoãn việc tải iframe bằng cách đặt tập lệnh php tạo ra nó ở chế độ ngủ.

Về cơ bản, tôi đang hỏi đâu là cách tiếp cận chính xác trên các trình duyệt để phát hiện khi iframe đã tải và tài liệu của nó đã sẵn sàng?

để phát hiện khi iframe đã tải và tài liệu của nó đã sẵn sàng chưa?

Thật lý tưởng nếu bạn có thể lấy iframe cho bạn biết chính nó từ một tập lệnh bên trong khung. Ví dụ, nó có thể gọi trực tiếp một hàm cha để thông báo rằng nó đã sẵn sàng. Luôn luôn cần sự cẩn thận khi thực thi mã xuyên khung vì mọi thứ có thể xảy ra theo thứ tự mà bạn không mong đợi. Một thay thế khác là đặt 'var isready = true;' trong phạm vi riêng của nó và có đoạn mã cha mẹ cho 'contentWindow.isready' (và thêm trình xử lý onload nếu không).

Nếu vì lý do nào đó, việc tài liệu iframe cùng hoạt động là không thực tế, thì bạn đã gặp phải vấn đề load-race truyền thống, cụ thể là ngay cả khi các phần tử nằm ngay cạnh nhau:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

không có gì đảm bảo rằng mục sẽ không được tải vào thời điểm tập lệnh thực thi.

Các cách thoát khỏi cuộc đua tải là:

1. trên IE, bạn có thể sử dụng thuộc tính 'readyState' để xem liệu thứ gì đó đã được tải chưa;

2. nếu mục chỉ có sẵn khi bật JavaScript là được chấp nhận, bạn có thể tạo động, đặt chức năng sự kiện 'onload' trước khi đặt nguồn và thêm vào trang. Trong trường hợp này, nó không thể được tải trước khi lệnh gọi lại được thiết lập;

3. theo cách cũ để đưa nó vào phần đánh dấu:

   <img onload="callback(this)" ... />

Các trình xử lý nội tuyến 'onsomething' trong HTML hầu như luôn luôn là điều sai và cần tránh, nhưng trong trường hợp này, đôi khi đó là lựa chọn ít tệ nhất.

Xem bài đăng trên blog này . Nó sử dụng jQuery, nhưng nó sẽ giúp bạn ngay cả khi bạn không sử dụng nó.

Về cơ bản, bạn thêm điều này vào document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

Đối với những người sử dụng React, việc phát hiện một sự kiện tải iframe có cùng nguồn gốc cũng đơn giản như thiết lập trình xử lý onLoadsự kiện trên phần tử iframe.

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Đối với bất kỳ ai sử dụng Ember, điều này sẽ hoạt động như mong đợi:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />