srcdoc不是src的简化写法,而是完全不同的加载机制:它不发http请求,直接将字符串作为完整html文档执行;src必须是合法url并触发网络请求,且两者不可互换,ie不支持srcdoc需用src降级。

srcdoc不是src的简化写法,而是完全不同的加载机制
srcdoc不发HTTP请求,也不解析URL;它直接把字符串当完整HTML文档执行。而src必须是合法URL(如"https://example.com"或"./page.html"),浏览器会发起网络请求并加载远程或本地资源。两者不能互换——设了srcdoc,src会被忽略(现代浏览器);但IE连srcdoc都不认,所以必须同时提供src作为降级路径。
srcdoc必须是完整HTML文档,src可以只是片段或资源路径
srcdoc值必须包含、<code>、、结构,漏掉任一标签,Safari大概率空白,Chrome可能自动补但行为不可靠。而src指向的HTML文件本身可以不规范(比如没),只要服务器返回能被解析的内容就行。常见错误是写srcdoc="<div>hello</div>"——这根本不会渲染,因为不是文档,只是片段。
srcdoc默认同源且无沙箱,src加载的跨域页面天然隔离
srcdoc内容默认与父页同源(即使字符串来自用户输入),不加sandbox就等于开放全部权限:脚本可执行、表单可提交、window.open()可弹窗、甚至尝试改top.location。而src加载的跨域页面,从一开始就被浏览器强制隔离,父页无法访问其contentWindow,除非显式设置sandbox="allow-same-origin"(极危险)。安全底线:用srcdoc必须配sandbox,最简写法是sandbox="";用src则天然带隔离,反而更“省心”。
动态更新srcdoc会销毁整个JS上下文,src更新只是重新加载
执行iframe.srcdoc = newHtml等价于刷新iframe:所有已运行的定时器、事件监听器、console.log输出、甚至正在执行的函数都会中断,document引用失效。而iframe.src = "new.html"虽然也重载,但至少保留了URL语义和缓存逻辑。高频更新场景(如Markdown实时预览)不适合反复赋值srcdoc,应考虑iframe.contentDocument.write()(需同源且无sandbox限制)或服务端渲染+src轮询。
srcdoc就不用管sandbox,或者把srcdoc当innerHTML使——它既不是模板引擎,也不是DOM操作API,而是一次性、强隔离、全文档级别的内联加载通道。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











