Ausfallseiten des HTML-Objekt-Tags werden im Fehlerfall nicht angezeigt

Ich muss eine PDF-Datei in einem modalen Dialogfeld anzeigen, für das ich das Objektelement verwende. In dem Moment, in dem ich dem Attribut "data" des Objektelements eine URL zuteile, macht es einen internen Aufruf der URL, um das Dokument abzurufen. Was passiert, wenn der Anruf beispielsweise aufgrund von Verbindungsproblemen fehlschlägt? Ich habe eine div (der Fehler Nachricht Container) in der Objekt-Tag als Fallback Inhalt, der angezeigt werden soll, wenn der Anruf fehlschlägt. Aber das passiert nicht. Wenn das Dokument nicht geladen wird, bleibt das Dialogfeld leer, anstatt meine Fehlermeldung anzuzeigen. Unten ist das Markup für das Objektelement.Ausfallseiten des HTML-Objekt-Tags werden im Fehlerfall nicht angezeigt

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

Ich werde die URL zu den „Daten“ Attribut wird die Zuweisung dynamisch, die den Anruf einleitet. Wenn der Aufruf fehlschlägt, sollte ich das div mit der ID pdfFetchFailureMessage im Dialogfeld abrufen, aber es wird leer angezeigt. Wo genau gehe ich falsch?

Quelle

2016-07-01 Rajarshi Chakrabarti

Setzen Sie den Nachrichteninhalt div außerhalb des Objekt-Tag und JS verwenden für die Lastereignisfehler zu überprüfen. – rafaelcastrocouto

Können Sie bitte ein Beispiel geben? Wie gehe ich mit dem Ladefehler um? Ich glaube nicht, dass das onerror-Attribut auf ein Objektelement wirkt. –

Setzen Sie das Nachrichten-Content-Div außerhalb des Objekt-Tags und verwenden Sie JS, um nach dem Ladeereignisfehler zu suchen, und zeigen Sie Ihre Nachricht an.

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>

Quelle

2016-07-04 12:39:36 rafaelcastrocouto

Dieses Beispiel scheint in IE nicht zu funktionieren. –

Ausfallseiten des HTML-Objekt-Tags werden im Fehlerfall nicht angezeigt

Antwort

Verwandte Themen