如何让浏览器显示XML默认文档树且隐藏“缺少样式信息”的提示

我懂这是个比较小众的需求——你想在客户端Web应用里给用户展示XML，用浏览器默认的XML渲染（比如基于data:text/xml,…的iframe）其实效果就挺好，但美中不足的是文档顶部总会弹出这么个提示：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

那怎么才能让浏览器只显示文档树，同时把这个“缺少样式信息”的提示藏起来呢？

你提到试过给XML加自定义样式表，但那样会直接替换掉默认的文档树，改成HTML风格的渲染，这显然不是你想要的。

这里有个用clip-path实现的小技巧，我在Firefox里测试是有效的，虽然不确定它的跨浏览器兼容性如何，你可以参考试试：

JavaScript 代码 #

const doc = document.getElementById('example');
const xml = `<foo type="example"><bar>lorem</bar></foo>`.trim();
doc.src = `data:text/xml,${encodeURIComponent(xml)}`;

CSS 代码 #

iframe {
  clip-path: polygon(0 90px, 100% 90px, 100% 100%, 0% 100%);
  margin-top: -90px;
}

HTML 代码 #

<iframe id="example" width="800" height="500"></iframe>

备注：内容来源于stack exchange，提问作者Sukima