■2018/06/25 15:32 追記
キャッシュが回避されていなかったのと
URLパスを指定する際に/を含むURLを指定すると
うまく動かなかったのを修正しました。
失礼致しました。
━━━━━━━━━━
HTML5ではdocument.writeの仕様が強く非推奨･･･
の続き。
（http://gon-fla.sblo.jp/article/183580209.html）
なんとか組んでみた関数ではhead内にscriptタグやlink（css）タグを
追加できなかったのでチラホラと調べてみて、自分なりに作ってみた。
キャッシュがものすごくやっかいで静的なファイルを作った場合
更新が反映されないなど（jsとかcss）
気付かないでいると結構ハマってしまうので、
キャッシュの対策もしつつ動的にjsやcssを読み込む処理を組んでみた。
■まず、更新しないっていうのを前提の関数を作り、
そこから読み込みたいファイル（js、css）を呼び出すって方法。
ファイルは一つでも良いけど複数ある場合にも対応させたつもり。
確認はChromeとIE11にて行った。
サンプルはjsファイルとcssを読み込むっていうもの。
cssは適用するクラスを作成しておけば、読み込んだ後
cssが反映されるっぽい。
a.jsの次にb.jsというファイルでワンクッション
はさんで、キャッシュ対策をしてます。
カスタマイズすべき所は
b.jsのarr.push()のところ。
読み込みたいjsとcssファイルの数だけpushで。
そんな感じです。
サンプルの01〜03.jsと
test_css.cssはありませんので適当に作って下さい。
.test_class_dayo{
background-color:#FFE;
}
とかで試せばちゃんと反映します。（PC上のみ確認）
--------------------
■ファイル a.js
function kokokara(src_url){
var r=String(Math.random());
var str="";
str=r.substr(-8);
var ctag;
ctag=document.createElement("script");
ctag.setAttribute("type","text/javascript");
ctag.setAttribute("src",src_url+"?"+str);
document.head.appendChild(ctag);
}
--------------------
--------------------
■ファイル b.js
function yobareru(){
var arr=new Array();
//
//▼以下にjs、cssファイルのパスを記述する▼
//
arr.push("01.js");
arr.push("02.js");
arr.push("03.js");
arr.push("test_css.css");
//
//▲▲
//
var r=String(Math.random());
var str="";
str=r.substr(-8);
for(var i=0;i＜arr.length;i++){
var strs=arr[i];
var dam;
if(strs.match('\/')){
var sla=strs.split("/");
var end_str=sla[sla.length-1];
dam=end_str.split(".");
}else{
dam=strs.split(".");
}
var ctag;
if((dam[1] == 'js')||(dam[1] == 'php')){
ctag=document.createElement("script");
ctag.setAttribute("type","text/javascript");
ctag.setAttribute("src",src_url);
}else{
ctag=document.createElement("link");
ctag.setAttribute("rel","stylesheet");
ctag.setAttribute("href",src_url);
ctag.setAttribute("type","text/css");
}
document.head.appendChild(ctag);
}
}
yobareru();
--------------------
--------------------
■ファイル test.html
＜html＞
＜head＞
＜script type="text/javascript" src="a.js"＞＜/script＞
＜script type="text/javascript"＞kokokara("b.js");＜/script＞
＜/head＞
＜body＞
＜p＞
test01
＜/p＞
＜p class="test_class_dayo"＞
test02
＜/p＞
＜/body＞＜/html＞
例により＜＞は全角なので半角にしてくださいね。
