里的JS不执行是因为其内容被转为离线DocumentFragment,script被忽略、资源不加载、事件不绑定;必须用content.cloneNode(true)克隆后插入DOM才能生效。
HTML 的标签本身不渲染、不执行、不响应事件——它只是个“冷冻仓库”,内容必须手动克隆后插入 DOM 才能生效,直接写在里面的所有脚本、图片、音频都不会运行。
为什么
里的 JS 不执行?
浏览器解析到
时,会把整个内容转为一个文档片段(
),并挂载到
属性上。此时内部所有节点处于“离线”状态:
标签被忽略,不会解析也不会执行
不发起请求,
/
都不会触发
不播放,
不显示
绑定的
或
全部失效(因为节点还没在 DOM 中)
怎么正确取出并使用
内容?
必须用 JavaScript 显式克隆、插入,且推荐用
(深克隆):
不能用
—— 它返回空字符串(
的 innerHTML 是只读且为空的)
不能用
——
没有子元素节点,只有
属性包含文档片段
如果模板含表单控件(如
),克隆后需重置
和
,因为克隆的是初始状态,不是当前值
和
有什么区别?
老式方案靠伪造
让浏览器跳过执行,本质是“骗解析器”;
是标准语义化方案,有明确行为规范:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
:内容作为纯文本存在,需手动
解析,易 XSS(若未转义就插入)
:内容是真实 DOM 节点,可直接操作属性、调用方法,安全性更高(不自动执行,无内联事件风险)
兼容性:现代浏览器全支持(Chrome 26+、Firefox 22+、Edge 13+、Safari 9+);IE 完全不支持,需用
+ polyfill 补丁
真正容易被忽略的是:模板内容一旦被
插入,它就和普通 DOM 完全一样——但如果你反复克隆同一个
,要注意事件监听必须每次插入后单独绑定,不能指望“写在模板里就自动生效”。
DocumentFragmentcontentonerroronloadcontrolsonclickaddEventListenercontent.cloneNode(true)
tpl.innerHTMLtpl.childrencontentvaluecheckedtypeinnerHTMLdocument.createElement('template')cloneNode