当通过ajax加载一个html页面时,会加载脚本标签吗?

当你使用AJAX加载一个html文档时,它会怎样处理HEAD标签中的节点:(script,link,style,meta,title)会忽略它们还是加载并parsing它们? 而在jQuery的ajax()函数的情况下?

5 Solutions collect form web for “当通过ajax加载一个html页面时,会加载脚本标签吗?”

在调用jQuery.ajax()方法时,可以指定dataType属性,该属性描述了您期望从服务器获得什么样的数据,以及在接收到数据后如何处理。

默认情况下,jQuery将尝试根据响应的MIMEtypes来猜测dataTypetypes。 但是,您可以从以下显式指定数据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的术语来说它可能不应该。 metatitle不会做任何事情,对他们来说已经太迟了。 只是使用innerHTMLparsing它们将不会做任何事情,但是,如果可以的话,也要避免它。

当你说“加载”时,我明白,仅仅意味着调用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。

  • Console.log消息没有显示在Chrome的JavaScript控制台?
  • jquery - 禁用点击
  • 用JavaScript生成内存中的XML文档
  • JavaScript重新加载哈希值的页面
  • jQuery的sorting占位符高度问题
  • jQuery的 - 我如何将事件绑定到将在稍后显示的隐藏的元素?
  • 我怎样才能防止退格键导航回来?
  • 我怎样才能清除焦点上的textarea?
  • jQuery“each()”函数是否同步?
  • Requirejs domReady插件vs Jquery $(document).ready()?
  • 我可以用jQuery淡入背景图片(CSS:background-image)吗?