作者：scottjehl仍然需要实验技术来衡量对测试性能的影响。它可能最终成为一个有用的工具，也可能成为一种被弃用的做法。无论哪种方式，这对我们来说都是平局！只要我一直从事Web工作，我就需要一种简单的HTML驱动方式来将另一个文件的内容直接包含到页面中。例如，我经常希望向页面添加额外的HTML，或嵌入SVG文件的内容，以便我们可以对其进行动画处理和设置样式。通常我们通过使用JavaScript获取文件并将其内容附加到特定元素，或者通过在服务器端包含文件来实现这种嵌入，但在大多数情况下，这些方法不是我们想要的。这周我一直在考虑如何使用一些新的与获取相关的标记模式（如rel="preload"或HTML导入）来做到这一点，但我总是得出相同的结论，即这些都不能让您轻松访问The检索到的文件的内容。然后我想，假设浏览器允许我检索父文档中iframe的内容，也许旧的iframe可能是一个很好的模式。事实证明，它肯定会！一个简短的演示：包括SVG下面是一个内联（嵌入式）SVG图形。它是从外部文件signal.svg加载的。为了加载和嵌入SVG文件，我使用了以下标签：另一个演示：也许包含HTML文件会更有用……这是一个使用HTML而不是SVG的示例！可以使用以下标记加载：关于这个的注意事项：您可能已经注意到，标记片段检查contentDocument.body或仅检查contentDocument。这是对HTML和SVG包含的规范化检查。这是必要的，因为即使HTML文件本身只包含一个段落元素，浏览器也会创建一个完整的HTML文档来包装该段落并包含HTML元素、head、body等。因此片段将尝试获取body元素iframe如果存在，如果不存在，它将用于整个文档。值得注意的是，如果您要导入包含多个元素的HTML文件，我建议将其全部包装在一个div中，这样iframe标签将只查找正文中的第一个子节点。好处与我们过去使用的其他模式相比，此模式有一些明显的好处：它是声明性的。与大多数自定义JavaScript方法不同，此方法是HTML驱动的，其在标记中的用途一目了然。它适用于HTML或SVG。我不确定你想包括什么，但这至少满足了我自己的需要。这是异步的！内容加载不会阻止页面呈现，这是iframe的本质。它是缓存友好的。与服务器端嵌入不同，这种模式允许我们包含外部文件，同时允许文件自然缓存以供以后重用。（使用服务器端包含，客户端缓存是可能的，但很难做到）。无论JavaScript是否正在运行，它都会显示内容，因为这是iframe的设计目的。JavaScript可以将iframe的内容移动到父文档中，即使失败，您仍然会看到包含的内容。它不留痕迹：将内容导入页面后，iframe将被删除。注意：您可能希望指定border:0;iframe甚至可以在加载时安全地隐藏它（也许通过onerror事件再次显示它？）。它适用于各种浏览器：在我目前的简短测试中，它适用于Chrome、Firefox、Safari和Edge。IE将在iframe中显示备用内容，但我认为我可以通过调整onload处理中的JS来获得对IE的支持，因为它目前使用IE不喜欢的语法。稍微调整一下，我认为IE支持是可能的。如果您愿意，它甚至可以包装在Web组件中，正如AndyBell巧妙地演示的那样（这是一种更清晰的表示法，但在JS依赖性方面更脆弱）。考虑其他可能的用途很有趣……也许您可以引入HTML模块及其关联的CSS链接。或者在文档或博客文章中嵌入推文或代码。它甚至可以用于异步加载并应用具有较低优先级的常规rel=stylesheet链接，否则很难做到（注意：我没有对这个想法进行太多测试）。可以懒加载吗？是的，很快！在此模式下使用iframe的另一个好处是iframe在进入视口时能够延迟加载。这可以通过load="lazy"属性来实现，该属性也适用于img元素。代码如下所示：可能出现的问题iframe在网络上很常用，但是在页面中过度使用iframe会导致性能或内存消耗问题。例如，对页面上的所有图标使用它可能有点矫枉过正，但它可能适用于需要动画和样式的特定图标。但现在我只能做更多的测试。也有可能出现XSS问题，但我不确定这与您需要了解外部内容的其他情况有什么不同。您仍然需要进行常规的安全检查，最好将其视为同域技术，尽管我也不确定。目前，这有望比以前直接在页面中包含另一个文件的方法有所改进。反馈我们会继续测试这个模式，如果发现有趣的东西，后续内容会尽快发布。如果您有任何反馈或想法，请随时通过Twitter(https://twitter.com/filamentg...)与我们联系。谢谢阅读！
