Question

我正在加载这样一个页面：

 function loadGUIComponents() {
// load contents into each accordion area
$("#listEntryDiv").load("listEntry/listEntryIndex.html");
$("#openEntryDiv").load("openEntry/openEntryIndex.html");
 };

在listEntryIndex.html中，可以正确调用这样的脚本：

<script>
alert("AHA!");
</script>
<h1>the world is helloed.</h1>

但是如果我尝试将JS外部化为一个单独的文件：

<script type="text/javascript" src="listEntryIndex.js"></script>
<h1>the world is helloed.</h1>

永远不会调用该脚本。我真的google了很多，并没有得到理由。人们在问为什么他们的javascripts在加载后没有被调用，但是我的原因是只有标记在加载后才被调用。谢谢！

Answer 1

问题不是jQuery load，从根本上说是有效的：Live example该示例使用此代码：

$("#target").load("http://jsbin.com/oqefe4");

要加载此文件：

<p>Test</p>
<script src='http://jsbin.com/ewexi4'></script>

...引用了这个：

alert("Hello");

（我在上面使用了完整路径，但here's a version使用了相对路径;这也很好。）

这表明实际问题在于其他地方。你必须通过一个调试器来看看发生了什么。幸运的是，这几天几乎每个浏览器has one built in都有免费选项。

更新：您可能遇到相对路径问题。当HTML文件中的文本加载到当前文档中时，该HTML文本中script（和img等）标记内的路径将相对于当前文档的位置，而不是您正在加载的文档的位置。我在调试器中查找404错误，这可能是路径问题。这个想法是由@Darth___（我认为还有更多内容）的问题现已删除的评论引发的，这些评论质疑路径......（编辑：这是DarthJDG;他现在是{{ 3}}。我打赌这是正确的。）

具体而言，请说您的主要文件位于

http://example.com/foo/maindocument.html

您的load来电正在加载listEntry/listEntryIndex.html和openEntry/openEntryIndex.html，其中包括：

http://example.com/foo/listEntry/listEntryIndex.html
http://example.com/foo/openEntry/openEntryIndex.html

如果中的HTML 包含您列出的脚本标记listEntryIndex.js，则相对于maindocument.html，不，它将被解析listEntryIndex.html，因此：

http://example.com/foo/listEntryIndex.js

<强>不

http://example.com/foo/listEntry/listEntryIndex.js

Answer 2

您必须确保正确引用src属性中的脚本。从上面的例子中，我假设当前的文件结构：

./currentPage.html
./listEntry/listEntryIndex.html
./listEntry/listEntryIndex.js
./listEntryIndex.js <------------ //This file doesn't exist.

当您从其他位置的文件加载内容时，可能找不到使用相对路径包含的脚本。您应该复制脚本或符号链接它们以使它们可在本地访问或使用绝对路径。

Answer 3

试试这个：

$.ajax({
  url: "listEntry/listEntryIndex.html",
  dataType: "script",
  success: function(data){
    $("#listEntryDiv").html(data);
  }
});

$.ajax({
  url: "openEntry/openEntryIndex.html",
  dataType: "script",
  success: function(data){
    $("#openEntryDiv").html(data);
  }
});

Answer 4

来自.load() documentation：

jQuery使用浏览器的.innerHTML 用于解析检索到的属性记录并将其插入目前的文件。在此过程中，浏览器经常过滤元素文件，如，或元素。结果，由.load（）检索的元素可能不会与文件完全相同由...直接检索浏览器。

您是否可以将<script>标记放在<head>内，浏览器会将其删除？也许可以使用<script>代码放置。

JQuery加载似乎没有处理<script type =“..”src =“a.js”>？</script>

4 个答案: