JQueryで複数のhtmlをincludeする。includeしたhtmlの要素に対してJSも使えるようにする。

いまさらJQuery再び

前回の記事では一つのhtmlファイルを読み込んでたんですが、複数のhtmlファイルを読み込もうと思います。さらに各htmlが読み込み終わってから、展開された要素に対してJS使ったりしたい。


作った関数の使い方

第一引数にはJSONの配列、第二引数には読み込んだ外部JSから使いたい関数を渡します。

第一引数の配列の各要素のJSONのキーにはfilepath,selectorがあり、それぞれ読み込むHTMLファイルのパスと展開先のセレクタを値として設定します。

第二引数は特に使いたいJSがなければなくても大丈夫です。

// includeHTML(JSONの配列,function(){読み込んだ外部JSから使いたい関数たち})

includeHTML(
[
{ filepath: "/include/footer.html", selector: "div.footer_inc"},
{ filepath: "/include/header.html", selector: "div.header_inc" }
],
function() {
// ここから使いたい関数
$(function() {
hoge.ready();
huga.ready();
});
}
);


作った関数


includeHTML

function includeHTML(requestArrayOfJson, usingFuncFromMainjs = function(){;}) {

var jqXHRList = [];
// ajaxの処理のリスト作成
for (var i = 0; i < requestArrayOfJson.length; i++) {
jqXHRList.push(
$.ajax({
url: requestArrayOfJson[i].filepath,
cash: false,
dataType: "html"
})
);
}
// jqXHRList内のajaxの処理が全て終了したらthen内の処理に移る
$.when
.apply($, jqXHRList)
.then(
function() {
var htmlList = [];
// ajaxで取得したhtmlのリスト作成
for (var i = 0; i < arguments.length; i++) {
var result = arguments[i];
htmlList.push(result[0]);
}
return htmlList;
},
function(){
console.log("Fail to GET HTML by ajax");
}
)
.then(
function(htmlList) {
// 各htmlのinclude処理
for (var i = 0; i < requestArrayOfJson.length; i++) {
$(requestArrayOfJson[i].selector).html(htmlList[i]);
}
},
function(){
console.log("Fail to write HTML");
}
)
.then(
function() {
// JSのファイルを読み込んだ後、コールバックでこの関数の第二引数として渡した関数実行。
$.getScript("読み込みたい外部JSのパス", usingFuncFromMainjs);
},
function(){
console.log("Fail to get 読み込みたい外部JS");
}
);
}


感想

できたけど、なんかやってることの方向性がおかしい気もする。


参考

https://qiita.com/YusukeHirao/items/bca14c5f2fe4026fd4d7