直接修改 iframe 的 src 属性最可靠方式是 document.getelementbyid("myiframe").src = "url";需确保 iframe 已挂载 dom 且非跨域，动态加载 html 字符串须用 data:text/html;charset=utf-8, + encodeuricomponent() 编码，改 src 后调用子页面函数必须等待 onload 事件。
src 属性可以直接赋值修改，但必须确保 iframe 元素已存在于 DOM 中，且不能在未加载完成时就尝试调用其内部脚本。
直接用 document.getElementById().src 最可靠
老式写法如 document.frames["name"].src 在现代浏览器中基本失效，还会报“无权限”错误；contentWindow.location.href 也受限于同源策略，跨域时直接被拦截。最通用、兼容性最好的方式是通过 ID 获取元素后直接设 src：
document.getElementById("myIframe").src = "https://example.com";- 必须保证该 iframe 已渲染（比如放在
DOMContentLoaded之后执行，或加if (iframe) { ... }判空） - 不依赖 jQuery，原生 JS 即可，无额外包体积负担
用 jQuery 改 src 要用 attr()，不是 prop()
jQuery 的 .prop("src") 读取的是当前解析后的绝对 URL（比如会自动补全协议和域名），而 .attr("src") 才对应 HTML 中写的原始值，动态赋值必须用后者，否则可能意外触发重载失败或路径错乱：
- ✅ 正确：
$("#myIframe").attr("src", "https://baidu.com"); - ❌ 错误：
$("#myIframe").prop("src", "https://baidu.com");（尤其在初始src为空或相对路径时表现异常） - 如果页面用了 jQuery 但没等 DOM 就执行，记得包一层
$(document).ready(...)
想加载 HTML 字符串？得用 data:text/html;charset=utf-8, 编码
不能把一段 HTML 字符串（比如 "<h1>Hello</h1>"）直接塞进 src，浏览器会当它是文件路径去请求，404 是必然的。正确做法是拼 Data URI：
- 先
encodeURIComponent(htmlString)，再拼前缀：data:text/html;charset=utf-8,${encoded} - 示例：
iframe.src = "data:text/html;charset=utf-8," + encodeURIComponent("<h1>动态内容</h1>"); - 注意：IE 不支持 Data URI 作为 iframe
src，若需兼容 IE，只能走服务端渲染或降级为document.write写入子窗口
改完 src 后要调用子页面函数？等 onload
很多人卡在这步：iframe.src = "page.html" 之后立刻执行 iframe.contentWindow.someFunc()，结果报 undefined。这是因为新文档还没加载完，contentWindow 里啥都没有。
- 必须监听
iframe.onload或iframe.addEventListener("load", ...) - 注意：每次改
src都会触发一次load，所以绑定逻辑要避免重复（比如用once: true或手动removeEventListener） - 跨域 iframe 的
contentWindow是受限制的，此时无法访问其任何属性或方法，连onload事件都可能不触发（取决于目标页是否允许嵌入）
真正容易被忽略的点是：DOM 存在性校验、跨域边界、以及 Data URI 的编码完整性——少一个 encodeURIComponent，特殊字符（比如中文、&、）就会让整个 iframe 白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
