2016-07-01 67 views
0

我必須在模態對話框中顯示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,但它會變成空白。我究竟在哪裏出錯?

+0

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

+0

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

回答

0

將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>

+0

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

相關問題