Question

我最近试图在某些脚本中找到一个错误，并在使用jQuery加载页面时发现了这个非常有趣的行为。

文件＃1：Test1.htm

<div id="test"></div>

<script type="text/javascript">
$(document).ready(function(){
 $('#test').load('test2.htm #content',function(){
  alert('done loading!');
 })
})
</script>

文件＃2：Test2.htm

<div id="content">
howdy

<script type="text/javascript">
$(document).ready(function(){
 alert('hello #1');
})
</script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
 alert('hello #2');
})
</SCRIPT>

</div>

现在，当我运行Test1.htm时，我得到以下内容：

你好＃2警告
来自test2.htm的howdy显示
已完成加载提醒

正如您所看到的，唯一的区别是脚本标记大写为hello＃2警告。显示问候＃1警报的脚本永远不会被激活......

到目前为止，我已经在Firefox 3.55，IE 8.0.6001.18702和Chrome 3.0.195.33中对此进行了测试，结果相似。

过去，我想从加载的内容中提取javascript，类似于this SO question。所以我的问题是，这是一个错误还是一个解决方案？

更新：正如下面的Jitter所述，如果Test2.htm的脚本在我加载的内容之外，则会发生同样的事情。

<div id="content">
howdy from test2.htm
</div>

<script type="text/javascript">
$(document).ready(function(){
 alert('hello #1');
})
</script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
 alert('hello #2');
})
</SCRIPT>

Answer 1

实际上这似乎是jQuery中的一个错误。你应该发一个错误票。很高兴找到顺便说一句。

在jQuery 1.3.2第3270-3272行，我们有

// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))

显然，此正则表达式中不区分大小写的标志i丢失了。因此，jQuery不会按预期删除<script>...</script>，<SCRIPT>，<Script>等所有小写的<scriPt>标记。

因此第3272行看起来应该是

.append(res.responseText.replace(/<script(.|\s)*?\/script>/gi, ""))

此外，只有您在加载网址test2.htm #content中使用选择器才会触发此错误。如果你把它留下并使用

$('#test').load('test2.htm',function(){....});

和test2.htm看起来如下所示它也会触发三个警报（无论你如何编写脚本标记）。所以这也是一个角落案例的错误。

howdy

<SCRIPT type="text/javascript">
$(document).ready(function(){
 alert('hello #1');
});
</SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
 alert('hello #2');
})
</script>

Answer 2

通过HTML注入脚本元素很难可靠地跨浏览器，因此在jQuery中broken in various ways。它可以解决已知的浏览器问题，但最终可能会使问题变得更糟。

修复了jitter的错误（+1），你会发现根本没有插入脚本，试图避免这些问题。即使使用此修复程序，此行仍然是恶劣且易碎的代码，尝试使用正则表达式处理HTML，并且如果脚本块中包含字符串/script>（这非常有效），则会失败。并且</script >会失败。等等。

请自己帮个忙，并将<script>从您打算动态加载的HTML内容中删除。始终将要执行的任何脚本内容与HTML分开执行。

非常有趣的jQuery加载行为，错误或解决方案？

2 个答案: