HTML對象標記後備內容在失敗的情況下不顯示

我必須在模態對話框中顯示PDF，爲此我使用了對象元素。根據我的理解，當我將一個URL分配給object元素的「data」屬性時，它將對URL進行內部調用以獲取文檔。如果由於連接問題導致呼叫失敗，該怎麼辦？我在對象標記內有一個div（錯誤消息容器）作爲後備內容，如果調用失敗，應該顯示該內容。但是這並沒有發生。如果文檔未被加載，則對話框保持空白，而不是顯示我的錯誤消息。以下是對象元素的標記。HTML對象標記後備內容在失敗的情況下不顯示

<object id="pdfContainer" type="application/pdf"> 
    <div id="pdfFetchFailureMessage" data-message-container="pdfFetchFailureMessage" class="spacer"> 
    <div class="message-group"> 
     <div class="messaging error customer-level" data-message-context="default"> 
     <div class="message-container" data-focus-first-message="" tabindex="-1"> 
      <span class="icon-wrapper"><i class="icon"></i></span> 
      <div class="message-content"> 
      <p role="error"><em class="visuallyhidden">error</em>The form could not be generated at the moment. Please try again later.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</object>

我將動態地將URL分配給「data」屬性，從而啓動呼叫。如果通話失敗，我應該在對話框中找到ID爲的div div pdfFetchFailureMessage，但它會變成空白。我究竟在哪裏出錯？

來源

2016-07-01 Rajarshi Chakrabarti

將對象標記外的消息內容的div和使用JS以檢查負載事件錯誤。 – rafaelcastrocouto

你能舉個例子嗎？我如何處理加載錯誤？我不認爲onerror屬性適用於對象元素。 –

將message-content div置於object標籤之外，並使用JS檢查加載事件錯誤並顯示消息。

var pdf = document.querySelector('#pdfContainer'); 
 
var msg = document.querySelector('#pdfFetchFailureMessage'); 
 
pdf.addEventListener('error', function (event) { 
 
    msg.classList.remove('hidden'); 
 
}); 
 
pdf.setAttribute('data', 'http://box2d.org/manual.pdf');

.error { 
 
    color: red; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <object id="pdfContainer" type="application/pdf"></object> 
 
    <div id="pdfFetchFailureMessage" data-message-container="pdfFetchFailureMessage" class="spacer hidden"> 
 
     <div class="message-group"> 
 
     <div class="messaging error customer-level" data-message-context="default"> 
 
      <div class="message-container" data-focus-first-message="" tabindex="-1"> 
 
      <span class="icon-wrapper"><i class="icon"></i></span> 
 
      <div class="message-content"> 
 
       <p role="error"><em class="visuallyhidden">error</em>The form could not be generated at the moment. Please try again later.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-07-04 12:39:36 rafaelcastrocouto

此示例在IE中似乎不起作用。 –

HTML對象標記後備內容在失敗的情況下不顯示

回答

相關問題