新ブログ「ごんフラブログG2」

WordPressで始めてみました

[海外]バンドルされた複数のゲーム・PCアプリが購入できるサイト
humblebundle.com


ごんたろうのぼやきトップ

2018年06月23日

【JavaScript】動的にscriptタグ、link rel〜を挿入する[CSS]

━━━━━━━━━━
■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>



例により<>は全角なので半角にしてくださいね。
posted by ごんたろう(Gontaro-Soft) at 18:20 | Comment(0) | 備忘録/お知らせ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
ブログランキング・にほんブログ村へ
にほんブログ村

インターネット・コンピュータランキング