当通过ajax加载一个html页面时,会加载脚本标签吗?
当你使用AJAX加载一个html文档时,它会怎样处理HEAD标签中的节点:(script,link,style,meta,title)会忽略它们还是加载并parsing它们? 而在jQuery的ajax()函数的情况下?
在调用jQuery.ajax()
方法时,可以指定dataType
属性,该属性描述了您期望从服务器获得什么样的数据,以及在接收到数据后如何处理。
默认情况下,jQuery将尝试根据响应的MIMEtypes来猜测dataType
types。 但是,您可以从以下显式指定数据types:
-
html :以纯文本forms返回HTML; 包含的脚本标记在插入到DOM中时被评估。
-
文本 :纯文本string。
-
xml :返回可以通过jQuery处理的XML文档。
-
脚本 :将响应评估为JavaScript,并以纯文本forms返回。 除非使用选项“cache”,否则禁用caching。
-
json :将响应评估为JSON并返回一个JavaScript对象。
-
jsonp :使用JSONP加载JSON块。 会添加一个额外的“?callback =?” 到您的URL的末尾来指定callback。
作为一个例子,下面的ajax调用将以纯文本string的forms返回数据,而不执行脚本或操作DOM:
$.ajax({ url: 'ajax/test.html', dataType: 'text', success: function(data) { alert(data); } });
当你使用AJAX加载一个html文档时,它对HEAD标签里面的节点做了什么:(script,link,style,meta,title)
这取决于你如何做加载。 ajax()
(就像它所基于的XMLHttpRequest一样)本身只是给你一个string。 你怎么把它写进文件?
如果将该string写入元素的innerHTML
,则其内部的脚本将不会被执行。 这在任何地方都不是标准化的,但是所有当前stream行的浏览器都是这样的。
但是,如果您将该元素插入到文档中(无论文档是否已在文档中), 则会在首次执行时在多个浏览器中执行。 在IE中,当你直接插入脚本元素到任何元素,无论是否在文档中,脚本都会被执行。
这是非常不一致和不方便的,这就是为什么你应该避免在文档中使用AJAX加载<script>
元素。 反正通常没有什么好的理由。 更好地保持你的脚本代码是静态的,并使用JSON(或只有在绝对必要时才eval
)来将脚本数据传递给它们。
当AJAX将内容加载到文档中时,jQuery的load
函数试图弥补浏览器差异。 它不能捕捉所有涉及<script>
(有一些非常奇怪的)。 一般来说,你不应该依赖它。 您可以避免使用HTML页面响应,但只加载没有<script>
特定元素,因为这只能写入innerHTML步骤。 但是,你再也不想依靠这个了。 让服务器返回一段HTML或JSON的代码更好,你的脚本可以直接使用。
至于样式表和样式表链接,将它们插入到主体中通常是可行的,尽pipe用HTML的术语来说它可能不应该。 meta
和title
不会做任何事情,对他们来说已经太迟了。 只是使用innerHTML
parsing它们将不会做任何事情,但是,如果可以的话,也要避免它。
当你说“加载”时,我明白,仅仅意味着调用XHR(或$ .ajax或$ .get等)从Web服务器拉下XML,JSON或文本资源,将其存储在浏览器的JS运行时内存中,并得到一个参考。 对于HTML资源,单独行动不parsing任何东西。
但是,如果你把这个HTML注入DOM(至less在Firefox 3.5中),那么它将被解释。 例如,假设你有以下三个非常专业的文件。
barf1.html:
<html> <head> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(init); function init() { $.get('barf2.html', inject); } function inject(data) { debugger; $('body').html(data); //document.write(data); } </script> </head> <body> long live barf1! </body> </html>
barf2.html:
<div> <script type="text/javascript"> alert('barf2!'); </script> <script type="text/javascript" src="barf3.js"></script> barf2 lives here now! </div>
barf3.js:
alert('barf3!');
当您导航到barf1.html时,页面内容将发生变化,您将看到两个JavaScript警报,表示内联脚本块和外部脚本文件都被解释。
不,他们不会被解释。
HTML可以通过使用innerHTML或DOM操作来加载。 在这两种情况下,如果HTML包含<script>
标记,则不会被解释。
但是,您可以浏览Ajax HTML内容中的<script>
标签,然后eval()
,如果您真的需要的话。
如果使用这种types的<script src="http://site/script.js"></script>
脚本标记,它将被解释。
正如已经指出的那样, 总的来说 – 不,脚本标签不会被解释。
我完全不知道其他标签会发生什么。
我在这里做一个假设,你正在加载一个完整的AJAX页面 – 我不知道你为什么要这样做? 也许你可以给我们更多的信息,我们可以提出一些build议?
要更直接地解决您的问题 – 一般来说,重新加载的内容上所需的任何脚本都不应该与内容一起重新加载,而是与页面重新加载。 这样,您可以安排从您的AJAX重新附加事件处理程序的callback。