iframe标签srcdoc属性的作用是什么？为何需用它而非直接编写HTML？

带srcdoc的iframe和直接写HTML的核心区别在于，iframe提供了独立的浏览上下文，这带来几个关键场景的优势：

• 样式与脚本完全隔离
  父页面的全局CSS、JS不会影响iframe内的内容，反之亦然。比如父页面设置了p { font-size: 20px; color: blue; }，直接写的<p>会继承这个样式，但iframe里的<p>完全不受影响；脚本层面，iframe内的变量、函数不会和父页面冲突，也不会意外修改父页面的DOM或状态。

• 安全沙箱能力
  配合sandbox属性，可以给iframe内的内容设置严格的权限，比如禁止运行脚本、禁止提交表单、禁止访问父页面等。哪怕是你自己编写的内容，想限制它的权限（比如防止误操作影响主页面），直接写HTML是做不到这种安全隔离的。

• 独立的页面上下文
  iframe拥有自己的document和window对象，你可以单独控制这个区域的滚动、缩放，或者在里面运行独立的交互逻辑，不会干扰主页面的状态。比如嵌入一个需要独立处理用户输入的小模块，用iframe能避免和主页面的事件监听、状态管理冲突。

• 兼容降级方案
  如果浏览器不支持srcdoc属性，会自动 fallback 到src属性指定的页面。直接写HTML没有这种降级能力，只能依赖JS做兼容处理，麻烦得多。

• 动态内容更易管理
  可以通过JavaScript动态修改iframe的srcdoc内容，实现局部内容的替换，而且因为是独立上下文，修改时不会影响主页面的其他元素状态，比直接操作父DOM的某个节点更干净可控。

举个实际的例子：如果你的主页面用了复杂的CSS框架（比如Bootstrap），但你想嵌入一段不需要框架样式的内容，用带srcdoc的iframe就能完美隔离样式，不用额外写一堆重置样式的代码。

内容的提问来源于stack exchange，提问作者TigersEye120