JQuery动态加载本地文件

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

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

当我在一个页面中只包含一个文件时，此函数工作正常

问题：

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

---

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

您在每个

上使用相同的文件名。加载

。试试下面的方法

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

这将解决您的第一个问题

---

试着解决你的第二个问题

您在每个

上使用相同的文件名。加载
。试试下面的方法

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

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

这将解决您的第一个问题

试着解决你的第二个问题

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

这一行使用“include file”类选择器加载所有元素，因此这两个元素都是如此

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

这一行使用“include file”类选择器加载所有元素，因此这两个元素都是如此

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

谢谢你，斯克斯，那是即时的。它成功了，谢谢你为我节省了很多时间。谢谢SKS，那是瞬间的。它成功了，谢谢你为我节省了很多时间。我进一步搜索了Chrome的问题，这是由于策略访问控制允许来源。任何解决方案都可以解决这个问题。请阅读您的第二个问题。我进一步搜索了Chrome的问题，这是由于访问控制允许来源的策略。任何解决方法都可以解决这个问题。请阅读第二个问题的帖子。