假设您有一个动态加载内容的简单网页，如下所示:
- 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:
- 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 属性 - 它表示属于脚本的样式表，脚本将为我们加载。这是脚本:
- plugin.js -
var css = $('<link />', {
rel: "stylesheet", type: "text/css", href: $('script:last').attr('css')
});
$('head').append(css);
最后是样式表，它只是为加载的 inner div 着色，以证明一切正常:
- plugin.css -
#inner
{
border: solid 1px blue;
}
现在，您会注意到样式表的加载方式:我们查看 $('script') 并选择最后一个，然后我们获取 css 属性并将 link 项附加到文档的头部。
我可以访问 /svc.html 并且 javascript 运行，加载我的样式表，一切都很酷 - 但是，如果我访问 /main.html，javascript运行但未能在 $('script') 的数组中找到 plugin.js 的加载(因此无法加载样式表)。请注意，插件脚本会运行，只是看不到它自己。
这是一个错误吗？ jQuery AJAX 方法的限制？ $('script') 不应该反射(reflect)所有 已加载的脚本吗？
* 编辑 *
在痛哭流涕和咬牙切齿之后，我决定采用 Kevin B 的解决方案，但是，我无法让它工作，主要是因为 plugin.js 代码在scriptNode 被插入，但在插件代码中，该节点尚未插入，因此在 $('script') 数组中不可用 - 所以我还是SOL。我已将所有代码放在此处以供审查:
最佳答案
将 HTML 添加到 DOM 的 jQuery 代码总是去掉 <script>标签。它运行它们，然后将它们丢弃。
该行为的一个异常(exception)是当您使用“$.load()”和允许您加载页面片段的 hack 时:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
在这种情况下，脚本会被剥离并且不会评估/运行。
关于javascript - ajax 调用后脚本加载到哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8234215/