HTML <object>标签在IE11无法正常显示，Firefox中正常，求协助排查

嘿，这个IE11的兼容性坑我之前也踩过！Firefox对<object>标签渲染纯文本的支持很友好，但IE11对type="text/plain"的<object>处理逻辑完全不一样——要么显示空白，要么直接提示用户下载文件，确实头疼。

给你几个可行的解决方案，按兼容性和便捷度排序：

• 用<iframe>替代<object>：这是最省心的方案，IE11对iframe加载纯文本的支持很稳定，代码改起来也简单：

  <iframe height="100%" width="1000" src="test.txt" frameborder="0"></iframe>
  

  这个写法在Firefox和IE11里都能正常渲染文本内容，几乎不需要额外调试。

• 给<object>添加降级内容：如果一定要保留<object>标签，可以在标签内部加一段fallback内容，让IE11用户至少能通过链接查看文本：

  <object height="100%" width="1000" type="text/plain" align="middle" data="test.txt">
    <p>你的浏览器无法直接显示该文本，<a href="test.txt">点击下载查看</a></p>
  </object>
  

• 用JavaScript动态加载文本：这是兼容性最好的方案，所有浏览器都能适配。通过JS读取文本文件内容，再插入到页面中显示，还能灵活控制样式：

  // 选中页面里的object标签
  const objElement = document.querySelector('object');
  // 用XMLHttpRequest读取文本（兼容IE11，原生fetch不支持IE11）
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'test.txt', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const textContainer = document.createElement('div');
      textContainer.style.width = '1000px';
      textContainer.style.height = '100%';
      textContainer.style.whiteSpace = 'pre-wrap'; // 保留文本里的换行和空格
      textContainer.textContent = xhr.responseText;
      // 替换掉原来的object标签
      objElement.parentNode.replaceChild(textContainer, objElement);
    }
  };
  xhr.send();
  

• 尝试<embed>标签替代：部分场景下，<embed>在IE11里对纯文本的支持比<object>好，可以试试这个写法：

  <embed height="100%" width="1000" type="text/plain" src="test.txt">
  

个人最推荐第一个iframe方案，改起来最快，兼容性也最稳；如果需要更灵活的样式控制，JS动态加载的方案会更合适。

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