Firefox中<object>标签加载失败报NS_ERROR_WONT_HANDLE_CONTENT，无回显内容

Firefox中<object>标签既不加载资源也不显示回退文本，且报错NS_ERROR_WONT_HANDLE_CONTENT，核心原因是响应头中的content-disposition: attachment。这个头会强制浏览器将资源视为「下载文件」，而非「可内嵌渲染的页面内容」，因此<object>会直接放弃处理该资源，同时因为浏览器的下载逻辑优先级高于<object>的错误回调机制，导致onError无法触发，回退文本也不会显示。

1. 后端修改响应头（最优解） #

如果有权限修改后端配置，直接移除content-disposition: attachment响应头。当资源的响应头中没有这个字段时，Firefox会根据Content-Type判断是否内嵌渲染，加载失败时会自动显示<object>标签内的回退文本。

2. 前端适配方案（无法修改后端时） #

针对音频资源（如.mp3） #

替换<object>为<audio>标签，它能正确处理audio/mpeg类型资源，且加载失败时会触发onerror回调，同时支持自定义回退内容：

<audio controls>
  <source src="MY_INTERNAL_URL" type="audio/mpeg">
  Couldn't load
</audio>

针对文本资源（如.txt） #

通过fetch主动请求资源，手动处理加载结果：

const container = document.getElementById('text-container');
fetch('MY_INTERNAL_URL')
  .then(response => {
    if (response.ok && !response.headers.get('content-disposition')?.includes('attachment')) {
      return response.text();
    }
    throw new Error('Resource is marked for download or failed to load');
  })
  .then(text => {
    container.textContent = text;
  })
  .catch(() => {
    container.textContent = 'Couldn\'t load';
  });

对应HTML：

<div id="text-container"></div>

通用检测方案 #

如果需要兼容多种资源类型，可以先通过fetch检查响应头，再决定如何渲染：

function loadResource(url, fallbackElement) {
  fetch(url, { method: 'HEAD' })
    .then(response => {
      const disposition = response.headers.get('content-disposition');
      if (disposition?.includes('attachment')) {
        fallbackElement.style.display = 'block';
        return;
      }
      const object = document.createElement('object');
      object.data = url;
      object.onload = () => {
        fallbackElement.style.display = 'none';
      };
      object.onerror = () => {
        fallbackElement.style.display = 'block';
      };
      fallbackElement.before(object);
    })
    .catch(() => {
      fallbackElement.style.display = 'block';
    });
}

// 使用示例
loadResource('MY_INTERNAL_URL', document.getElementById('fallback'));

对应HTML：

<div id="fallback" style="display:none;">Couldn't load</div>

内容的提问来源于stack exchange，提问作者freafrea