假设您有一个简单的网页,动态加载的内容如下所示:
并且加载的页面使用一个单独文件中的少量Javascript代码:
请注意脚本标签上的css属性 - 它指示属于该脚本的样式表,该脚本将为我们加载。以下是脚本内容:
- plugin.js -
现在,您会注意到样式表的加载方式:我们查看
我可以访问
这是一个错误吗? jQuery AJAX方法的限制吗?
*编辑*
经过长时间的哀号和咬牙切齿,我决定采用Kevin B的解决方案,但是我无法使其工作,基本上是因为
- 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')
不应该反映已加载的所有脚本吗?*编辑*
经过长时间的哀号和咬牙切齿,我决定采用Kevin B的解决方案,但是我无法使其工作,基本上是因为
plugin.js
代码在插入scriptNode
时运行,但在插件代码内部,节点尚未被插入,因此在$('script')
数组中不可用 - 所以我仍然处于困境中。我把所有的代码都放在这里供审查:http://www.arix.com/tmp/loadWithJs/。
$('#main').load()
方法,它似乎表现相同。它确实运行脚本,但也将其丢弃... - ekkis