Phát hiện xem nội dung iframe đã tải thành công chưa

Question

Tôi có tiện ích con chứa iframe. Người dùng có thể định cấu hình url của iframe này, nhưng nếu url không thể tải (nó không tồn tại hoặc người dùng không có quyền truy cập internet) thì iframe sẽ chuyển đổi thành trang ngoại tuyến mặc định.

Câu hỏi là, làm thế nào tôi có thể phát hiện iframe có thể được tải hay không? Tôi đã thử đăng ký sự kiện 'tải' và, nếu sự kiện này không được kích hoạt sau một thời gian thì tôi chuyển đổi dự phòng, nhưng điều này chỉ hoạt động trong Firefox, vì IE và Chrome kích hoạt sự kiện 'tải' khi "Không tìm thấy trang" hiển thị.

Answer 1

Ngày nay, trình duyệt có một loạt giới hạn bảo mật giúp bạn tránh xa nội dung của iframe (nếu đó không phải là tên miền của bạn).

Nếu bạn thực sự cần chức năng đó, bạn phải xây dựng trang máy chủ phải hoạt động như một proxy, nhận url như một tham số, kiểm tra xem đó có phải là url hợp lệ không và chuyển hướng hay hiển thị lỗi trang.

Answer 2

Nếu bạn có quyền kiểm soát nội dung của khung nội tuyến (ví dụ: bạn có thể thêm mã tùy ý vào trang), bạn có thể thử triển khai một chức năng đặc biệt trong mỗi trang, sau đó trong trang của bạn, bạn gọi hàm đó và bắt một lỗi (thông qua bộ xử lý window.onerror) nếu chức năng được gọi qua eval không thành công do trang không tải.

Dưới đây là mã ví dụ: http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=420

Answer 3

Sau khi đám cháy onload, bạn có thể nhặt rác nội dung của khung nội tuyến để xem nếu nó chứa một trang hữu ích hay không. Bạn sẽ phải làm cho trình duyệt này trở nên không may vì tất cả chúng đều hiển thị thông báo "không tìm thấy trang" khác.

Mọi chi tiết, hãy xem tại đây http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/

Answer 4

tôi thấy đường dẫn sau qua Google: http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

Không biết nếu nó giải quyết vấn đề 'Page Not Found'.

<script type="javascript"> 
var iframe = document.createElement("iframe"); 
iframe.src = "http://www.your_iframe.com/"; 
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) { 
    iframe.onreadystatechange = function(){ 
    if (iframe.readyState == "complete"){ 
     alert("Iframe is now loaded."); 
    } 
    }; 
} else { 
    iframe.onload = function(){ 
    alert("Iframe is now loaded."); 
    }; 
} 
</script> 

Tôi chưa thử bản thân, vì vậy tôi không biết liệu nó có hoạt động hay không. Chúc may mắn!

Answer 5

Cách kiểm tra xem url có khả dụng không và chỉ sau đó đặt url thực tế của iframe? ví dụ: với JQuery

var url = "google.com" 
var loading_url = "/empty.html" 
document.getElementById("iframe").src = loading_url; 
$.ajax({ 
    url: url, 
    type: 'GET', 
    complete: function(e, xhr, settings){ 
     if(e.status === 200){ 
       document.getElementById("iframe").src = url; 
     } 
    } 
}); 

Chỉnh sửa: Điều này dường như không hoạt động tên miền chéo, mã trạng thái là 0 trong những trường hợp đó.

Answer 6

Nếu bạn kiểm soát nội dung của khung nội tuyến, khung nội tuyến có thể gửi tin nhắn cho phụ huynh.

 parent.postMessage('iframeIsDone', '*'); 

Gọi lại phụ huynh nghe tin nhắn.

 var attachFuncEvent = "message"; 
     var attachFunc = window.addEventListener ; 
     if (! window.addEventListener) { 
      attachFunc = window.attachEvent; 
      attachFuncEvent = "onmessage"; 
     } 

     attachFunc(attachFuncEvent, function(event) { 
      if (event.data == 'iframeIsDone') { // iframe is done callback here 
      } 
     });