通常、Javascriptの関数等をまとめた外部Javascriptファイル（JSファイル と略します）を、HTML内の head 内で指定しますが、 別の外部JSファイルに入れ替えたい場合もあります。
そこで今回は、この外部JSファイルを別のファイルに変更する方法について説明します。
■外部JSファイルを使うHTMLファイル
外部JSファイル test-script-chg1.js がこのHTMLファイルと同じディレクトリに存在することにします。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="test-script-chg1.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div>
<p class="msgchg1">メッセージ１</p>
<p class="msgchg2">メッセージ２</p>
<p class="msgchg3">メッセージ３</p>
</div>
<p class="msgchg4">メッセージ６</p>
<button class="btn1">TEXT変更</button>
<button class="btn2">SCRIPT変更</button>
</body>
</html>
■外部JSファイル：test-script-chg1.js
$(function () {
//<button class="btn1">のクリックイベントの関数を宣言
$(".btn1").click(function(){
//<div>要素内の<p>の全てのTEXTを変更
$("div p").text("ああああああああ");
});
//<button class="btn2">のクリックイベントの関数を宣言
$(".btn2").click(function(){
//最初のスクリプトを削除
$("script[src='test-script-chg1.js']").remove();
//別のスクリプトを生成
var src = $("<script>").attr({
"type": "text/javascript",
"src": "test-script-chg2.js"
});
//スクリプト追加
$("head").append(src);
//以下の方法でもOK
//$("<script>").attr("type","text/javascript").attr("src", "test-script-chg2.js").appendTo("head");
//ボタンを不可設定
$(".btn2").prop('disabled', true);
});
});
このJSファイルは、.btn1 と .btn2 のクリックイベント関数を宣言しています。
.btn2 のクリックイベント関数で最初に読込んだJSファイル test-script-chg1.js を削除し、 新しい test-script-chg2.js を読込んでいます。
JSファイルを削除するセレクタの指定がミソなのですが、 このセレクタはHTML要素の script に対して script の引数が test-script-chg1.js であるものを示します。
これは属性フィルタと呼ばれるもので、以下の様に指定します。
$("[属性名='属性フィルタ値']")
「=」 は演算子でこの場合は「属性フィルタ値」と完全に等しいものが対象になります。
演算子は 「=」 の他に以下の様なものが在ります。
- != ... 指定した「属性フィルタ値」と異なる要素
- ^= ... 指定した「属性フィルタ値」と前方一致する要素
- $= ... 指定した「属性フィルタ値」と後方一致する要素
- *= ... 指定した「属性フィルタ値」と部分一致する要素
- ~= ... 指定した「属性フィルタ値」と単語として一致する要素
実際に以下を動作させると、「SCRIPT変更」ボタン押下後は、「TEXT変更」ボタン押下時に div タグ内の全ての p タグのテキストが「いいいいいいい」に変わります。 「ああああああああ」ではないことに注意して下さい。
⇒Javascriptファイルの動的に変更の例
■動的に読込まれる外部JSファイル：test-script-chg2.js
$(function () {
//<button class="btn1">のクリックイベントの関数を宣言
$(".btn1").click(function(){
//<div>要素内の<p>の全てのTEXTを変更
$("div p").text("いいいいいいい");
});
});
PR
コメント