能用 iframe 实现无刷新局部加载，但需同源且接受隔离性、seo 限制和高度适配成本；target 与 name 必须严格一致（大小写、空格敏感），初始 src 应设为真实地址或 about:blank，动态更新时需防缓存，跨域不可读子 dom，隐藏 iframe 可用于表单无刷新提交但服务端须返回完整 html，高度自适应需绕过 dom 就绪时机，慎用于需 history、seo 或状态共享场景。
能用 iframe 实现无刷新局部加载，但前提是目标资源与主页面同源（协议、域名、端口一致），且你接受它带来的隔离性、SEO 限制和高度适配成本。
target + name 匹配是最简可靠方案
点击链接不触发整页跳转，核心是让链接「落进」指定 iframe。这依赖两个属性严格一致：a 标签的 target 和 iframe 的 name。
-
target只认name，不是id——写成target="my-frame"但iframe只有id="my-frame"，就会新开标签页 - 大小写敏感、空格敏感：
target="MainFrame"和name="mainframe"不匹配 - 初始
src必须设为真实地址或about:blank；别用src=""或display:none，否则部分浏览器仍会同步加载阻塞首屏
src 动态更新适合 JS 驱动场景
当需要根据用户输入（如搜索框、下拉选择）加载不同内容时，直接改 iframe.src 更灵活。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须加防缓存参数，尤其在
file://协议下：iframe.src = "log.txt?t=" + Date.now() - 避免用
document.getElementsByTagName("iframe")捕获全部iframe，改用querySelectorAll('iframe[src^="file:///"]')精准定位本地文件 - 跨域时无法读取子页面 DOM，所以不要试图在父页通过
iframe.contentDocument.body.scrollHeight自适应高度——会抛SecurityError
隐藏 iframe 用于表单无刷新提交
上传 XML 或提交表单时不想刷新整页？把 form 的 target 指向一个隐藏 iframe 即可，但服务端响应必须包装成 HTML。
- 服务端不能只返回纯 JSON 或原始 XML，必须输出完整 HTML 结构，例如：
{"code":200,"msg":"ok"} - 前端要在
iframe.onload回调里读取内容，不能在submit后立刻访问contentWindow.document——此时 DOM 还没加载完成 - 清空表单字段不能写在
form.onsubmit里调this.reset()，应在iframe.onload中手动赋值：document.querySelector('input[name="file"]').value = ""
高度自适应与 loading 状态容易失控
同源时想让 iframe 高度随内容撑开，或加 loading 提示，必须绕过 DOM 就绪时机问题。
- 别直接写
iframe.height = iframe.contentDocument.body.scrollHeight，Safari 和部分 Android WebView 会在onload触发时返回0 - 加一层
setTimeout(..., 0)或监听iframe.contentDocument.addEventListener('DOMContentLoaded', ...) - 局部 loading 不能靠
innerHTML = "<div class="loading"></div>"，会销毁原有事件绑定；改用replaceChildren()并配合isLoading状态标记防重复提交
真正麻烦的不是怎么写，而是判断什么时候不该用 iframe：比如需要 history 管理、SEO 友好、或子页面要和父页共享状态时，它就不是解法而是障碍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
