JQuery动态加载本地文件

Question

我正在开发一个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服务器，因为这只是原型）

Answer 1

您在每个.load上使用相同的文件名。尝试类似下面的内容，

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

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

尝试Ways to circumvent the same-origin policy解决您的第二个问题。

Answer 2

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

此行为所有元素加载选择器为“include-file”的类，因此对于BOTH元素。

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

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