Question

我必须在模态对话框中显示PDF，我正在使用对象元素。根据我的理解，当我将URL分配给object元素的“data”属性时，它将对URL进行内部调用以获取文档。如果该呼叫因连接问题而失败怎么办？我在对象标记内部有一个div（错误消息容器）作为后备内容，如果调用失败则应该显示该内容。但那并没有发生。如果未加载文档，则对话框保持空白，而不是显示我的错误消息。下面是object元素的标记。

<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为 pdfFetchFailureMessage 的div，但它会显示为空白。我到底哪里错了？

Answer 1

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

发生故障时不显示HTML对象标签后备内容

1 个答案: