vlambda博客
学习文章列表

$().html("")里面的js是如何执行的

首先这涉及到jquery的一个bug,而且从1.x到3.x一直存在。



innerHTML
$().html("")里面的js是如何执行的


你有没有纠结过通过innerHTML方法添加的script,link等不会被解析执行。但是jquery的html方法却可以。


首先如果你是createElement一个新的script节点对象,然后修改innetText为js脚本,然后append后是可以被执行的。但是我试过,如果用DOMParser解析出来的,或者clone的,然后append进去是不会执行的。具体细节没做太多研究,因为jquery没用这个方法。



$().html("")里面的js是如何执行的
eval
$().html("")里面的js是如何执行的



jquery不是这么做的。他是获取所有的script标签内容,在dom创建完毕后,主动使用eval去执行。这在大部分情况下是没问题的。但是如果你的js中有document.write这样的语句,那你就会发现一个神奇的现象。write的内容没有出现在指定的js所在位置。如果文档流没有结束,那么就出现在body结尾。如果文档流结束了,你会发现页面内容全没了。


所以需要特别注意。使用jquery的html方法修改dom,会导致js在全局执行。


$().html("")里面的js是如何执行的
范例


<html><head><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script></head><body><script>$("body").append(`<div><script>document.write("<span>Hello</span>");<\/script></div>`);</script></body></html>


结果: