我正在将一个HTML文件加载到一个div中。文件包含一个无序列表。 这个列表应该是展开的(一个带有子菜单项的菜单)和关闭的。因此我需要JS。 但不幸的是这个脚本没有被加载。
有人能帮助我吗?
非常感谢!谢谢!:)
你想要通过 AJAX 加载内容到页面上的一个 div 元素中,我们把它叫做:
1)<div id="loadStuffHere"></div>
(在 abc.html 中)
2)需要填充 loadStuffHere
的内容来自 xyz.html
那么只需要这样做:
$("loadStuffHere").load("xyz.html");
但是等等!! 你不想加载所有来自 xyz.html 的内容,而只想加载 xyz.html 中的一部分,比如说 <div id="loadMeOnly"></div>
这个元素。
那么只需要这样做:
$("loadStuffHere").load("xyz.html #loadMeOnly");
但是等等!假设 <div id="loadMeOnly"></div>
里面包含一个手风琴,这意味着它必须被初始化并且你还需要包含相应的JavaScript文件... 嗯,该怎么办...
你可能会考虑这样做:
$("loadStuffHere").load("xyz.html #loadMeOnly");
$.getScript('js/xyz.js');
以上的方式很糟糕,因为a)你需要创建一个外部js文件,b)如果你按照正常的非ajax方式,可以只做1个http请求,但实际上你却发出了2个http请求。
最好的解决方案是用一次调用获取两件事情(HTML和js-1行,1个http),这里是如何做到的:
$("loadStuffHere").load("xyz.html #loadMeOnly, script");
这会加载#loadMeOnly
div和所有的script
标签。
关键在于逗号。你可以挑选需要加载的dom元素。
这个解决方案最好。在特定的div或内容容器加载后使用回调函数。
$('#CONTAINER').load('URL_TO_LOAD HTML_ELEMENT_TO_PLUCK_FROM_PAGE_AND_INSERT_INTO_CONTAINER', function () {
$.getScript('PATH_TO_SCRIPT_THAT_YOU_REQUIRE_FOR_LOADED_CONTENT');
});
所以首先确保您已经加载了jQuery,确保库的链接位于HTML文件的头部,例如:
<script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
使用 Firebug 工具,通过检查 "net" 选项卡来确保它已经被加载。
同时,请确保你已经加载了 你自己的 JavaScript 文件:(这里我将其称为 "main")
<script src="/javascripts/main.js" type="text/javascript"></script>
然后在您的js文件中做如下操作:
$.(document).load( function () {
alert("loaded!")
});
当页面“完全加载”后,这应该会触发警报。我更喜欢使用ready()
,它会在DOM加载完成时触发。
如果您已经做好了这一切,并且实际上想要做的是从您的js文件加载和执行js,请尝试以下操作:
.getScript()
我解决了。不知道这是否是最优雅的方法,但它有效 :)
jpsilvashy你的getscript();已经解决了它 :) 我已经在我的内容中包含了这两行,应该被加载:
<script type="text/javascript">
$.getScript("js/tutorial-1.js");
$.getScript("js/jquery.ahover.js");
</script>
对于所有遇到同样问题的人,这里有一个小提示。您应该删除body和head标签。如果它们被包含在内,它将无法正常工作。
但现在仍然有一个问题:为什么我需要在加载的内容中包含这个?我认为JavaScript必须在内容加载到dom后加载。
但这只是一些假设!
感谢您的大力帮助!
您可以使用jQuery.getScript
动态加载JavaScript文件并设置回调函数。当脚本已加载时,将调用回调函数。以下是从cdnjs加载highlightjs库的示例:
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js", function () {
$('pre code').each(function(i, block) {
// hljs now is available
hljs.highlightBlock(block);
});
});
啊,我明白了... 如果你只想加载一些HTML,请使用:
$("selector for div ").load("/path_to_html.html div#main");
在你的远程文件中,我想要检索的是 div#main
这个 div
,但记住这必须是相同的域才能工作。