在ajax调用之后加载脚本的位置在哪里？ [英] Where are scripts loaded after an ajax call?
问题描述
假设您有一个简单的网页，可以动态加载如下内容：
suppose you have a simple web page that dynamically loads content that looks like this:
- main.html -
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js">
</script>
<script type="text/javascript">
$(function() {
$.ajax({
type: 'get', cache: false, url: '/svc.html',
success: function(h) {
$('#main').html(h);
}
});
});
</script>
</head>
<body>
<div id='main'>
loading...
</div>
</body>
</html>
并且它加载的页面在单独的文件中使用了一点Javascript：
and that the page it loads uses a little Javascript in a separate file:
- svc.html -
<script type="text/javascript"
src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js">
</script>
<script type="text/javascript" src="/plugin.js" css="/plugin.css"></script>
<div id='inner'>
dynamically loaded content
</div>
注意脚本标签上的 css 属性 - 它表示属于脚本的样式表，脚本将为我们加载。这是脚本：
notice the css attribute on the script tag - it indicates a style-sheet that belongs to the script and which the script will load for us. Here's the script:
- plugin.js -
var css = $('<link />', {
rel: "stylesheet", type: "text/css", href: $('script:last').attr('css')
});
$('head').append(css);
最后是样式表，它只是为内部着色 div被加载，作为证明它一切正常的证据：
and, finally, the style-sheet, which merely colours the inner div that gets loaded, as proof that it all works:
- plugin.css -
#inner
{
border: solid 1px blue;
}
现在，您会注意到样式表的加载方式：我们查看 $（'script'）并选择最后一个，然后我们获取 css 属性并附加一个将项目链接到文档的头部。
now, you'll notice the way the style-sheet gets loaded: we look at $('script') and pick off the last one, then we grab the css attribute and attach a link item to the head of the document.
我可以访问 /svc.html 并且javascript运行，加载我的样式表，一切都很酷 - 但是，如果我访问 /main.html ，javascript会运行但是无法运行在 $（'script'）数组中找到 plugin.js 的加载（因此无法加载样式表）。请注意，插件脚本确实运行，它只是看不到自己。
I can visit /svc.html and the javascript runs, loads my style-sheet, all's cool - however, if I visit /main.html, the javascript runs but fails to find the loading of the plugin.js in the array of $('script') (and therefore fails to load the stylesheet). Note that the plugin script does run, it just doesn't see itself.
这是一个错误吗？ jQuery AJAX方法的局限性？不应该 $（'script'）反映已加载的所有脚本？
Is this a bug? a limitation of the jQuery AJAX method? shouldn't $('script') reflect all scripts that have been loaded?
*编辑*
经过多次哀号和咬牙切齿之后，我决定选择Kevin B的解决方案，但是，我不能让它工作，主要是因为 plugin.js 代码在插入 scriptNode 时运行，但是在插件代码，该节点尚未插入，因此在 $（'script'）数组中不可用 - 所以我仍然是SOL。我已将所有代码放在此处进行审核：
after much wailing and gnashing of teeth, I decided to go for Kevin B's solution, however, I can't get it to work, basically because the plugin.js code runs at the time the scriptNode gets inserted, but within the plugin code, the node has not yet been inserted and is thus not available in the $('script') array - so I'm still SOL. I've put all the code for review here:
http://www.arix.com/tmp/loadWithJs/
推荐答案
添加的jQuery代码到DOM的HTML总是删除< script> 标记。它运行它们然后将它们抛弃。
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
该行为的一个例外是当你使用允许加载片段的hack使用$ .load（）时页面：
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
在这种情况下，脚本将被剥离并且不评估/运行。
In that case, the scripts are stripped and not evaluated/run.
这篇关于在ajax调用之后加载脚本的位置在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
