可通过iframe、object、JavaScript动态加载、服务器端包含（SSI）四种有效方法嵌入外部HTML，HTML Imports已废弃不可用。
如果您希望在当前HTML文档中动态或静态地嵌入另一份HTML代码，但浏览器默认不支持直接通过HTML标签加载外部HTML文件，则需要借助特定技术手段实现内容的嵌入。以下是实现此目标的多种方法：
一、使用iframe元素嵌入外部HTML文件
iframe允许将另一个HTML文档作为内联框架嵌入到当前页面中，其内容独立渲染，与主页面隔离。该方法无需JavaScript，兼容性好，适用于展示第三方页面或独立模块。
1、在HTML文档中定位到需插入外部HTML的位置。
2、插入iframe标签，并设置src属性为外部HTML文件的相对或绝对路径。
立即学习“前端免费学习笔记（深入）”；
3、添加width和height属性以控制显示区域尺寸，例如width=”100%” height=”300px”。
4、可选添加title属性提升可访问性，如title=”嵌入的页脚内容”。
5、确保目标HTML文件与当前页面同源，或服务器已配置CORS策略以支持跨域加载（若需跨域）。
二、使用object标签嵌入HTML片段
object标签可用于嵌入外部资源，包括HTML文件，其行为在部分浏览器中更接近原生内容嵌入，且支持fallback内容。它比iframe更轻量，但对HTML嵌入的支持因浏览器而异。
1、在文档中插入object标签，设置data属性指向目标HTML文件路径。
2、指定type属性为”text/html”以明确资源类型。
3、在object标签内部添加备用文本或HTML内容，用于在不支持时显示。
4、设置width和height样式以确保可见区域。
5、注意：Safari和部分旧版Chrome可能限制object加载本地HTML文件，需部署在HTTP服务器上测试。
三、通过JavaScript动态加载并注入HTML内容
利用fetch或XMLHttpRequest获取外部HTML文件的文本内容，再将其解析并插入到指定DOM节点中。该方式完全可控，支持错误处理与内容预处理，但需启用JavaScript。
1、在HTML中创建一个具有唯一id的容器元素，例如
。
2、在script标签或外部JS文件中，使用fetch()请求外部HTML文件路径。
3、调用response.text()获取返回的HTML字符串。
4、使用document.getElementById(“include-target”).innerHTML = htmlString;注入内容。
5、若需执行注入HTML中的脚本，需手动创建script标签并append到body，原生innerHTML不会自动执行script标签。
四、使用服务器端包含（SSI）或服务端模板引擎
在Web服务器（如Apache、Nginx）启用SSI功能，或使用PHP、Node.js等后端环境，在响应生成阶段将其他HTML文件内容拼接到主文档中。该方法在服务端完成，客户端仅接收最终HTML。
1、确认Web服务器已启用SSI模块，例如Apache中启用includes模块并设置Options +Includes。
2、将HTML文件扩展名改为.shtml（SSI默认识别扩展名）。
3、在文档中插入SSI指令，例如。
4、确保被包含文件位于同一目录或使用正确路径，路径必须为服务器文件系统路径，非URL路径。
5、重启服务器使配置生效，并通过HTTP访问验证包含结果。
五、使用HTML Imports（已废弃，仅作兼容性说明）
HTML Imports曾是W3C草案中用于导入HTML文档的原生机制，但已被所有主流浏览器弃用并移除支持。当前任何新项目均不应采用此方法。
1、历史上写法为。
2、导入后需通过import property读取内容，例如var content = link.import；。
3、Chrome 61起完全移除支持，Firefox、Safari从未实现，Edge已终止支持。
4、现有依赖HTML Imports的项目必须迁移至ES模块、自定义元素或上述其他方案。
以上就是如何在html中插入html_在HTML文档中插入其他HTML代码【文档】的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604970.html
微信扫一扫 
支付宝扫一扫 
