JQueryはローカルファイルを動的にロードします

Question

私はHTMLプロトタイプを開発しています。ページ内のすべての静的コンテンツは別々のファイルに保存されています。これらのファイルをHTMLプロトタイプに含めて使用したいと思います。 以下は、2つの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）の負荷が含ま

1.When。

2.Singleファイルの読み込みにはFF、IE9で動作しますが、Chromeで動作しません。：

Answer 1

（注記すべてのファイルはローカルであり、これは単なるプロトタイプであるとして、私は、Webサーバーを使用することを計画しておりません）

それぞれ.loadに同じファイル名を使用しています。下記のようなものを試してみてください。

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

これは最初の問題を解決するはずです。

あなたの2番目の問題については、Ways to circumvent the same-origin policyを試してください。

Answer 2

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

この行は、 "include-file"クラスのセレクタを持つすべての要素を読み込みます。したがって、両方の要素も同様です。

EDIT： 多分あなたはまた、次のように使用することができます（テストしていません）

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