JQuery动态加载本地文件

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

我使用jquery load（）方法来包含这些文件。

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

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

问题：

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

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

Answer 1

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

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

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

尝试绕过第二个问题的同源策略 。

Answer 2

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

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

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

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