Không thể thay thế onreadystate để tải

Question

Tôi đã ẩn biểu tượng tải khi tệp của tôi tải xuống xong trong một iframe. Nó hoạt động tốt trong Internet Explorer. Trong Chrome, tôi không thể chờ cho đến khi tệp tải trong số iframe.

Mọi trợ giúp đều được đánh giá cao.

function checkIframeLoaded() { 
    var iFrameObject = document.getElementById("iframehidden"); 
    var iframeDoc = iFrameObject.contentDocument || iFrameObject.contentWindow.document; 
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == "interactive" || iframeDoc.readyState == "loaded") { 
     if (top.document.getElementById("tblPleaseWait") != null) { 
      top.document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     else if (document.getElementById("tblPleaseWait") != null) { 
      document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     return; 
    } 
} 

function setupLoader(objIFrame, brestorepane) { 
    if (objIFrame.attachEvent) { 
     if (brestorepane) { 
      objIFrame.attachEvent('onreadystatechange', checkIframeLoaded); 
     } 

    } else { 
     if (brestorepane) { 
      objIFrame.addEventListener('load', checkIframeLoaded()); 
     } 
    } 
} 

Answer 1

Bạn đang thiết lập trình xử lý không đúng trong trình duyệt không phải của IE.

Trước tiên, có lỗi đánh máy. addEventListner phải là addEventListener. JavaScript console của bạn có thể đã đề cập đến điều này.

Sau đó, bạn đang gọicheckIframeLoaded() ngay lập tức, thay vì tham chiếu nó như một người xử lý.

Hãy thử:

objIFrame.addEventListener('load', checkIframeLoaded); 

Answer 2

Nếu iframe src điểm đến nội dung trên trang web của riêng bạn và bạn đã thiết lập đúng allow-same-origin sau đó bạn có thể sử dụng phương pháp này (bạn gắn thẻ câu hỏi với jQuery, vì vậy giải pháp này sử dụng jQuery, nhưng tinh khiết JS thay thế có thể là tốt)

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>

Một cách khác bạn có thể làm điều này là để đưa mã vào iframe tài liệu riêng của mình (ví dụ như iframe.html):

$(window).on("load", function() 
{ 
    var plsWait = top.document.getElementById("tblPleaseWait"); 
    if(plsWait) plsWait.style.display = "none"; 
}); 

Nếu iframe src là trên trang web của người khác - sau đó bạn đang gặp rắc rối. Trừ khi nội dung từ xa đã được thiết lập để cho phép tạo trang web chéo.

Ngoài ra, như Paul Roub chỉ ra, bạn có một lỗi ở đây:

objIFrame.addEventListener('load', checkIframeLoaded());

Bạn đang không thực sự ủy thác các checkIframeLoaded chức năng sự kiện load; bạn đang thực hiện hàm đó với dấu ngoặc đơn () và thay vào đó ủy quyền kết quả của nó là undefined.

Đơn giản chỉ cần loại bỏ các dấu ngoặc để đạt được hiệu quả mong muốn, đó là checkIframeLoaded sẽ được gọi khi sự kiện load được kích hoạt:

objIFrame.addEventListener('load', checkIframeLoaded);

Sau đó bạn chỉ cần làm việc trong những hạn chế của kịch bản trên khung.

Answer 3

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>