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. (Примечание: все файлы локальные, я не планирую использовать веб-сервер, так как это всего лишь прототип)

Answer 1

Вы используете одно и то же имя файла на каждом .load. Попробуйте что-то вроде ниже,

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

Это должно решить вашу первую проблему.

Попробуйте Способы обхода политики того же происхождения для вашей второй проблемы.

Answer 2

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

Эта строка загружается для всех элементов с селектором класса «include-file», поэтому для ОБА элементов.

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

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