HTMLオブジェクトタグfallbackの内容が失敗した場合に表示されない

オブジェクト要素を使用しているモーダルダイアログ内にPDFを表示する必要があります。私の理解によれば、オブジェクト要素の "data"属性にURLを割り当てると、URLを内部呼び出ししてドキュメントを取得します。接続の問題などでその呼び出しが失敗した場合はどうなりますか？私はオブジェクトタグの中にdiv（エラーメッセージコンテナ）をフォールバックコンテンツとして持っています。これはコールが失敗した場合に表示されるはずです。しかし、それは起こっていません。ドキュメントがロードされていない場合は、エラーメッセージが表示されず、ダイアログボックスが空白のままになります。以下はobject要素のマークアップです。HTMLオブジェクトタグfallbackの内容が失敗した場合に表示されない

<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を動的に割り当て、コールを開始します。呼び出しが失敗した場合は、ダイアログ内にid pdfFetchFailureMessageのdivを取得する必要がありますが、空白になります。どこが間違っていますか？

出典

2016-07-01 Rajarshi Chakrabarti

オブジェクトタグの外側にメッセージコンテンツのDIVを入れてロード・イベント・エラーをチェックするJSを使用します。 – rafaelcastrocouto

例を教えてください。読み込みエラーをどうやって処理するのですか？私はonerror属性がオブジェクト要素で動作するとは思わない。 –

オブジェクトタグの外側にmessage-content divを置き、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オブジェクトタグfallbackの内容が失敗した場合に表示されない

答えて

関連する問題