可使用fetch API、XMLHttpRequest、jQuery load方法、iframe或ES6动态import五种方式动态加载HTML内容，各自适用于不同兼容性、安全性与工程化需求场景。
如果您希望在一个HTML页面中动态加载另一个HTML文件的内容，可以通过JavaScript实现。以下是几种常用的技术方案：
一、使用fetch API加载HTML内容
fetch API是现代浏览器提供的原生异步请求接口，可用于获取外部HTML文件的文本内容，并将其插入到当前页面指定元素中。该方法支持跨域控制与错误处理，兼容性良好（IE除外）。
1、在目标容器元素上设置一个唯一的id，例如
。
2、编写JavaScript代码，调用fetch函数请求外部HTML文件路径。
立即学习“Java免费学习笔记（深入）”；
3、使用response.text()方法将响应体解析为字符串。
4、通过document.getElementById获取容器元素，并将其innerHTML属性设为返回的HTML字符串。
5、将脚本置于body底部或使用DOMContentLoaded事件确保DOM已就绪。
二、使用XMLHttpRequest加载HTML内容
XMLHttpRequest是较早的标准AJAX对象，适用于需要兼容旧版浏览器（如IE9+）的场景。它提供对HTTP请求的细粒度控制，包括状态监听与同步/异步选项。
1、创建新的XMLHttpRequest实例：const xhr = new XMLHttpRequest();。
2、调用open方法配置请求方式（GET）和目标HTML文件路径。
3、绑定onload事件，在状态码为200时读取xhr.responseText。
4、定位目标插入容器，例如document.getElementById(“content-placeholder”)。
5、将responseText赋值给容器元素的innerHTML属性。
三、使用jQuery的load方法加载HTML内容
jQuery的load()方法是对AJAX加载HTML内容的封装，语法简洁，支持选择器过滤，可直接加载远程HTML片段中的特定部分。
1、确保页面已引入jQuery库，可通过CDN链接加载。
2、调用$(“#content-placeholder”).load(“remote.html”);直接填充整个文件内容。
3、若只需加载remote.html中某个ID元素的内容，可写为$(“#content-placeholder”).load(“remote.html #section1”);。
4、支持回调函数，在加载完成后执行额外逻辑，例如：.load(“remote.html”, function() { console.log(“加载完成”); });。
5、注意：该方法依赖jQuery环境，不适用于无jQuery项目或需轻量级方案的场景。
四、使用iframe嵌入HTML文件
iframe是一种原生HTML标签，用于在当前页面中嵌套显示另一个HTML文档。它不依赖JavaScript，但内容处于独立上下文，与父页面交互受限。
1、在页面中插入标签。
2、可通过设置sandbox属性限制iframe内脚本执行权限以提升安全性。
3、若需与父页面通信，可使用postMessage API进行跨源消息传递。
4、注意：iframe加载的内容无法直接修改父页面DOM，且SEO不友好，不适合内容整合型需求。
五、使用ES6动态import配合HTML模板字符串
当被加载的HTML内容以模块形式组织（如导出为字符串常量），可结合动态import语法按需引入并渲染。适用于构建工具（如Vite、Webpack）支持的现代前端工程。
1、将HTML内容保存为.js文件，导出为默认字符串：export default `
`;。
2、在主页面中使用await import(“./template.js”)获取模块。
3、提取default属性值并插入目标容器：container.innerHTML = htmlString;。
4、该方式不适用于直接加载外部静态.html文件，仅限模块化HTML字符串资源。
以上就是html 如何调用html_使用JavaScript调用HTML文件内容【使用】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604830.html
微信扫一扫 
支付宝扫一扫 
