JQuery動態加載本地文件

我正在開發一個HTML原型，頁面中的所有靜態內容都保存在不同的文件中。我想在我的HTML原型中使用這些文件作爲包含。下面是調用兩個HTML包含文件的HTML代碼。JQuery動態加載本地文件

<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.Single文件加載在FF，IE9，但在Chrome中是行不通的。（注：所有文件都是本地的，我不打算使用Web服務器，這只是一個原型）

我進一步搜索與Chrome的問題如下（未測試），這是由於政策的訪問控制允許來源。任何解決方案來克服這個。 – 2012-03-15 21:35:44

閱讀http://stackoverflow.com/a/3076648/297641發佈您的第二個問題。 – 2012-03-15 21:49:41

您在每個.load上使用相同的文件名。嘗試類似下面，

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

這應該可以解決你的第一個問題。

2012-03-15 21:25:50

謝謝SKS，那是即時的。它的工作，謝謝你爲我節省了很多時間。 – 2012-03-15 21:30:10

很高興工作。第二個問題呢？ – 2012-03-15 21:33:09

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

此行加載所有具有類「include-file」選擇器的元素，因此用於BOTH元素。

編輯：也許你也可以使用

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

2012-03-15 21:27:48 Chris

回答