可通过五种方式动态加载外部HTML：一、fetch API；二、XMLHttpRequest；三、iframe嵌入；四、jQuery load()；五、服务端渲染输出。
如果您希望在网页中动态加载并显示外部HTML文件的内容，而不是直接嵌入静态HTML代码，则需要通过客户端或服务器端技术实现。以下是几种可行的操作方式：
一、使用JavaScript的fetch API加载HTML内容
该方法通过浏览器原生的fetch函数向服务器发起HTTP请求，获取指定HTML文件的文本内容，并将其插入到当前页面的指定容器中。需确保目标HTML文件与当前页面同源，或服务端已配置CORS支持。
1、在HTML页面中创建一个用于显示内容的容器，例如：
。
2、在标签内编写JavaScript代码，调用fetch函数请求HTML文件路径，如fetch("example.%ignore_a_1%")。
立即学习“前端免费学习笔记（深入）”；
3、使用.then()链式处理响应，调用response.text()方法将响应体解析为字符串。
4、获取文本后，通过document.getElementById("content-container").innerHTML = htmlText将内容写入容器。
二、使用XMLHttpRequest对象异步加载
该方法兼容性更广，适用于需要支持较老版本浏览器（如IE9+）的场景。它同样基于HTTP请求获取HTML文件原始文本，并手动注入DOM节点。
1、创建XMLHttpRequest实例：var xhr = new XMLHttpRequest();。
2、调用open()方法设置请求方式和目标URL，例如：xhr.open("GET", "page.html", true);。
3、为onload事件绑定处理函数，在状态码为200时读取xhr.responseText属性。
4、将返回的HTML字符串赋值给目标元素的innerHTML属性，例如：document.getElementById("target").innerHTML = xhr.responseText;。
三、使用iframe嵌入HTML文件
该方法不涉及JavaScript执行逻辑，而是利用浏览器原生的iframe标签直接加载并渲染外部HTML文档。适合展示完整独立页面结构，但无法直接操作其内部DOM（受同源策略限制）。
1、在页面中插入iframe标签：。
2、确保src属性指向可访问的HTML文件路径，且该路径为相对路径或绝对URL。
3、如需控制样式，可通过CSS设置iframe容器的宽高、边框及滚动行为。
4、若目标HTML文件与主页面不同源，iframe内内容无法通过JavaScript跨域访问其document对象。
四、使用jQuery的load()方法
该方法封装了AJAX请求逻辑，语法简洁，适合已引入jQuery库的项目。它自动处理请求发送、响应解析及DOM插入流程。
1、确认页面已加载jQuery库，例如通过CDN引入：。
2、准备一个空的容器元素，例如：
。
3、编写jQuery代码：$("#loaded-content").load("fragment.html");。
4、可选：在load()回调函数中添加成功或失败处理逻辑，例如：.load("file.html", function(response, status, xhr) { if (status == "error") { ... } });。
五、服务端渲染后输出HTML内容
该方式不在浏览器端执行加载，而是在服务端（如Node.js、PHP、Python Flask等）读取目标HTML文件内容，将其作为响应体的一部分返回给客户端。适用于SEO敏感或需预渲染的场景。
1、在服务端脚本中打开并读取HTML文件，例如Node.js中使用fs.readFileSync("template.html", "utf8")。
2、将读取的内容拼接到主页面模板的指定位置，或作为独立响应发送。
3、客户端接收到完整HTML响应后直接渲染，无需额外JavaScript干预。
4、注意：服务端必须拥有对目标HTML文件的读取权限，且路径需为服务器本地路径，不可为URL。
以上就是如何调取html_调取并显示HTML文件内容【显示】的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605118.html
微信扫一扫 
支付宝扫一扫 
![将 char[] 转换为 List：Arrays.asList() 的正确用法](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/176023356598268-480x300.jpg)
