纯HTML标签无法实现真正局部刷新,iframe是唯一原生支持局部加载的元素,但本质是嵌套独立文档;meta refresh和普通链接均触发整页重载,不满足局部要求;无框架局部刷新必须依赖JS操作DOM,核心为选容器、拉数据、塞内容三步。

纯 HTML 标签本身无法实现局部刷新——iframe 是唯一原生支持“局部加载”的 HTML 元素,但它本质是嵌套独立文档,不是真正的 DOM 局部更新。
为什么不能只靠 <meta http-equiv="refresh"> 或普通链接?
这类标签触发的是整页重载或跳转,不满足“局部”要求。比如:<meta http-equiv="refresh" content="5;url=/index.html"> 会强制刷新整个页面;<a href="/news"></a> 点击后也是全量导航。它们不控制目标容器、不拦截默认行为、不处理响应内容,和局部刷新无关。
iframe 是唯一合法的纯 HTML 方案,但有硬伤
它确实不用 JS 就能“局部加载”内容,写法极简:
<iframe name="content-frame" src="/partial/user-info.html" width="100%" height="200"></iframe> <a href="/partial/order-list.html" target="content-frame">查看订单</a>
但问题很实在:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记(深入)”;
- iframe 内页面与主页面完全隔离:无法共享
window变量、无法调用父页函数、事件无法跨边界冒泡 - SEO 不友好:搜索引擎通常不索引 iframe 内容
- 响应式布局难控制:宽高固定易导致滚动条或裁剪
- 无法监听加载状态(如 loading 中提示)、无法捕获 404 错误、无法做权限校验后再加载
所谓“无框架”不等于“不用 JS”,而是不用第三方库
真正可行的无框架局部刷新,必须搭配 JS 控制 DOM,但代码可以极简:
核心就三件事:选中容器、拉数据、塞进去。例如:
const container = document.getElementById('live-stats');
fetch('/api/uptime')
.then(r => r.ok ? r.text() : Promise.reject(r.status))
.then(html => container.innerHTML = html);
这段代码没引入任何库,只用浏览器原生 API,却完成了真实局部刷新。关键点在于:
-
container必须在 JS 执行前已存在于 DOM 中(脚本放


















