0

大変お世話になっております。以下の様なhtmlファイルがあり、下部にある記述でurlから取得したp_idの値の内容(例:1、か2)によって、その上にあるinclud1.js、かinclud2.jsを条件分岐させたいのですが、具体的にどのような記述にすればよろしいかお教え願いませんでしょうか。

<!doctype html>
<html>
<body>

<script type="text/javascript" src="includ1.js"></script>

<script type="text/javascript" src="includ2.js"></script>


<script type="text/javascript"> 
const url = new URL(location.href);
const p_id = url.searchParams.get("p_id");
</script>

<script type="text/javascript"> 
  document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('p_id ').value = p_id;   
});
</script>


</body>
</html>

*ご教授により試した記述

<!doctype html>
<html>
<body>

<script type="text/javascript"> 
const url = new URL(location.href);
const p_id = url.searchParams.get("p_id");

const script = document.createElement('script');
if (p_id == 1) {
  script.src = 'includ1.js';
} else {
  script.src = 'includ2.js';
}
document.body.appendChild(script);
</script>

<script type="text/javascript"> 
  document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('p_id ').value = p_id;   
});
</script>

</body>
</html>
4
  • 1
    読み込むJavaScriptファイルをinclud1.jsかinclud2.jsで切り替えたいという意味でしょうか
    – int32_t
    2019年11月14日 22:18
  • 1
    PHPやRubyなどのサーバサイドの言語を利用すれば、GETパラメータから出力するHTML変更することは割と簡単そうですが、サーバサイドの言語は利用できないという前提でしょうか
    – keitaro_so
    2019年11月14日 23:38
  • ご多忙のなかコメントを頂きまして大変感謝いたします。現在、上記のinclude1.jsだけで表示されているhtmlのページがあります。”その状態からカスタマイズして、urlの値によってinclude1.jsかinclude2.jsを使い分けることができるかどうか”と考えてのご質問でございます。説明不足で大変恐縮でございます。 2019年11月15日 4:38
  • @int32_t 様が書かれている通り、if文の前にurl,p_idの取得処理を記載してみていください。
    – wakuwaku
    2019年11月15日 8:44

1 件の回答 1

1

動的にscript要素を挿入すれば可能です。

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript"> 
const url = new URL(location.href);
const p_id = url.searchParams.get("p_id");

const script = document.createElement('script');
if (p_idに関する条件) {
  script.src = 'includ1.js';
} else {
  script.src = 'includ2.js';
}
document.body.appendChild(script);
</script>

</body>
</html>

挿入したスクリプトが非同期に実行されますが、それが困る場合はscript要素のloadイベントを待って対処します。

9
  • int32_t様、ご回答大変感謝いたします。ご教授頂いたように試してみました(上記に補足)がページを開くと白い画面になり、どこか問題があるようです。条件分岐、およびinclude1.jsの読み込み、がなされていない様なのですが、問題点は見当たりますでしょうか。 2019年11月15日 8:19
  • @baseballjapan 私が書いたとおりの順番のコードにしてください。p_idの代入よりも後でscript要素を作ってください。
    – int32_t
    2019年11月15日 8:45
  • int32_t様、前回の投稿の際、間違って貼り付けしておりましたが、やはり上記補足の記述で白い画面が表示されます。継続して試しておりますが、ご助言はございますでしょうか。 2019年11月15日 9:34
  • ブラウザの開発者ツールでscript要素が期待通りの形で挿入されているか確認してください。そのあとは includ1.js includ2.js の内容がわからないとなんとも言えません。中で DOMContentLoaded を待ってたりするとダメかもしれないですね。
    – int32_t
    2019年11月15日 15:28
  • 1
    include1.jsをシンプルな構文だけにして、デバックしてはどうでしょうか?例えばalert("読み込み完了!")にしてみるとどうなりますか?
    – keitaro_so
    2019年11月16日 8:01

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。