JQuery动态加载本地文件答案

【问题标题】：JQuery load local files dynamicallyJQuery动态加载本地文件
【发布时间】：2012-03-15 21:22:39
【问题描述】：

我正在开发一个 HTML 原型，页面中的所有静态内容都保存在不同的文件中。我想在我的 HTML 原型中使用这些文件。下面是调用这两个 HTML 包含文件的 HTML 代码。

<div class="include-file" file="header.html"></div>
<div class="include-file" file="footer.html"></div>

我正在使用 jquery load() 方法来包含这些文件。

$(function () {
    var fileName = $(".include-file").attr('file');
     $(".include-file").load(fileName);
});

当我在页面中只包含一个文件时，此功能可以正常工作。

问题：

1.当我包含两个文件时，第二个文件（footer.html）不加载，第一个文件（header.html）加载两次。

2.单个文件加载在FF、IE9中可以工作，但在Chrome中不工作。（注意：所有文件都是本地的，我不打算使用Web服务器，因为这只是一个原型）

【问题讨论】：

标签： jquery load

【解决方案1】：

您在每个.load 上使用相同的文件名。试试下面的方法，

$(function () {
    $(".include-file").each (function () {
       $(this).load($(this).attr('file'));
     });
});

这应该可以解决您的第一个问题。

【讨论】：

【解决方案2】：

$(".include-file").load(fileName);

这一行会为所有带有“include-file”类选择器的元素加载，对于BOTH元素也是如此。

编辑：也许你也可以使用以下（未测试）

$('div[file="'fileName'"').load(fileName);

【讨论】：