JQuery динамически загружает локальные файлы динамически

Question

Я разрабатываю прототип HTML, все статические данные на странице сохраняются в разных файлах. Я хочу использовать эти файлы как включенные в свой прототип HTML. Ниже приведен код HTML для вызова двух файлов HTML include.

<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.При I включают два файла второй файл (footer.html) не загружается и первый файл (header.html) загружает в два раза.

2.Single загрузка файлов работает в FF, IE9, но не работает в Chrome. (Примечание: Все файлы являются локальными, я не планирую использовать веб-сервер, так как это только прототип)

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.

EDIT: может быть, вы могли бы также использовать следующий (не проверено)

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