<script src="URL"></script> のURLパラメーターにjavascriptの変数を代入したい

Question

下記のように、株価を表示できるphpを作りました。
株価番号が変われば内容も変わります。

https://example.com/chart_data.php?no=5101

下記はphpのｿｰｽではなく、phpの結果です

var seriesData = [ { x: new Date(2020-09-01), y: [1320, 1673, 1319, 1671] }, { x: new Date(2020-09-02), y: [1671, 1888, 1669, 1888] }, { x: new Date(2020-09-03), y: [1888, 2063, 1885, 2063] }, { x: new Date(2020-09-04), y: [1985, 1985, 1973, 1973] }, ]

上記phpは当方のサーバー内で動きます。
上記を使用して、スマートフォン用のアプリでチャートを表示させようと思います。
スマートフォンなのでphpが使えません。
一方、このphpの中身をローソク足として表示できるjavascriptがあります。
下記であれば5101のチャートが表示されます。

chart.html

<script src="https://example.com/chart_data.php?no=5101"></script>
    <script>
チャート表示スクリプト
    </script>

【やりたいこと】
上記のchart.htmlは5101の株式ナンバーに固定されています。
この株式ナンバーについて、自分のファイルであるchart.htmlのパラメーターをベースとした変数
にしたいというのが希望です。
chart.html?no=5101 chart.html?no=5108 のようにパラメーターを変えるだけで、
5101だけでなく、5108などいろいろなチャートを表示させたいと考えています。

そのためには、chart.html?no=5108　とした段階で
chart.html　内に記載されている下記の　script src の番号が下記のように変わる必要があります。

<script src="https://example.com/chart_data.php?no=5108"></script>

これがうまく出来ないのが、今回の質問事項です。

【私が持っているjavascript】
下記のスクリプトにより、chart.html?no=XXXX というパラメーターが来た時に
var no という変数について、XXXXとすることが可能になります。

<script>
var url = location.href ;
document.write(""+url+"");
</script>
<script>
            var urlPrm = new Object;
            var urlSearch = location.search.substring(1).split('&');
            for(i=0;urlSearch[i];i++) {
                  var kv = urlSearch[i].split('=');
                  urlPrm[kv[0]]=kv[1];
            }
     var no = ("" + urlPrm.no + "");
</script>

やってみたこと

下記のように作り、「chart.html?no=5108」としてnoに5108を当ててみました。

chart.html?no=5108

<script>
var url = location.href ;
document.write(""+url+"");
</script>
<script>
            var urlPrm = new Object;
            var urlSearch = location.search.substring(1).split('&');
            for(i=0;urlSearch[i];i++) {
                  var kv = urlSearch[i].split('=');
                  urlPrm[kv[0]]=kv[1];
            }
     var no = ("" + urlPrm.no + "");
</script>

<script src="https://example.com/chart_data.php?no="" +no+ ""></script>
    <script>
チャート表示スクリプト
    </script>

5108のチャートが表示されると期待したのですが、うまく代入できませんでした。

どうすれば、<script src="URL"></script>　のURLパラメーターにjavascriptの変数を代入できるでしょうか?

よろしくお願いいたします。

Answer 1

scriptとすると読み込んだときに実行してるので、あとから書き換えたとして、実行できないんじゃないかと思いますが、
単にchart.htmlではなくchart.phpにして、PHPからHTML出力すれば良いのでは。

それか、chart_data.phpをajax実行してオブジェクトだけ返す様にして受け取った結果処理で「チャート表示スクリプト」を実行するとか。

Comments

[tajix_japan]

有難うございます。
自己解決しました。
<script>
document.write("<script type=\"text/javascript\" src=\"https://example.com/chart_data.php?no="+no+""></script>");
</script>
お時間をお取りいただきありがとうございました。

[tajix_japan]

解決したと思っていたのですが、解決できていませんでした。ここは一旦閉めてしまったので、ご指摘いただいた方法でいろいろ試してみます。もしかしたら再度同じ質問を上げることになりかもしれません。まずはいろいろ試してみます。有難うございました。

[m.ts10806]

「解決済み」は「受付中」に戻す（要は解除する）ことができます。

[tajix_japan]

有難うございます。　受付中に戻してみます。

[tajix_japan]

単にchart.htmlではなくchart.phpにして、PHPからHTML出力すれば良いのでは。
サーバー側はPHPで行けるのですが、クライアント側はjavascriptで作ったスマホアプリなのでphpが使えません。

それか、chart_data.phpをajax実行してオブジェクトだけ返す様にして受け取った結果処理で「チャート表示スクリプト」を実行するとか。

いま、まさにその仕様です。オブジェクトを返してもらうにあたり、
chart_data.php?no=5101 とか　chart_data.php?no=5108 とかに振りたいのですが、
それを振るにあたっての「5101」「5108」の変数を代入できないので困っています。

[m.ts10806]

＞クライアント側はjavascriptで作ったスマホアプリなのでphpが使えません。

その前程がどこにも書いてないので、質問本文に追記してください。
ちなみにそのスマホアプリとやらはどのように作ってるのでしょうか。

あと提示されているコードではno=5101固定です。
変数にしたいのでしたら「そもそもどこからどのようにくる数字なのか」
設計や定義をご提示ください。

後出しが多いとそれだけアドバイスが無意味になります。
要件や自身が知っていること考えていることはなるべく全て質問に書いてください。

[tajix_japan]

大変失礼しました。わかりやすく追記いたしました。よろしくお願いいたします。

[tajix_japan]

自己解決いたしました。お時間お取りいただき大変ありがとうございました。深く御礼申し上げます。

Answer 2

ちょっと状況がわからないですが
APIをご自身でつくっていてCORSに引っかからないならajax/fetchで
非同期に取得し、そうでないならJSONPなどで入手してください
（APIの仕様によります）

Comments

[tajix_japan]

有難うございます。
自己解決しました。
<script>
document.write("<script type=\"text/javascript\" src=\"https://example.com/chart_data.php?no="+no+""></script>");
</script>
お時間をお取りいただきありがとうございました。

[yambejp]

たぶんそれでは解決しません。scriptの閉じタグがバグってます
document.writeの運用方法もあまりよくないので
早晩破綻する仕組みに見えます

[tajix_japan]

ご指摘の通り解決できていませんでした。早とちりでした。ご指摘いただいた方法を試すとともに、受付中に変更します。有難うございます。

[yambejp]

どうしてもと言うならこんな感じ

window.addEventListener('DOMContentLoaded', ()=>{
var no=123;
document.querySelector('head').append(
Object.assign(document.createElement('script'),{src:`https://example.com/chart_data.php?no=${no}`})
);
});

[tajix_japan]

有難うございます。
なぜかうまく動きませんでした。
代入がまずいのかと思い、下記のように直接URLを書き込んでもやはりチャートが表示されませんでした。
有難うございました。
<script>
window.addEventListener('DOMContentLoaded', ()=>{
var no=123;
document.querySelector('head').append(
Object.assign(document.createElement('script'),{src:'https://example.com/chart_data.php?no=1234'})
);
});
</script>

[tajix_japan]

自己解決いたしました。お時間お取りいただき大変ありがとうございました。深く御礼申し上げます。

Answer 3

下記で自己解決いたしました。

<script language="JavaScript"> var url = 'https://example.com/chart_data.php?no='+no+''; var script = '<script src='+url+'></s'+'cript>'; </script> <script> document.write(""+script+"") </script>

document.writeの使用は問題があるとご指摘されるかと思いますが、
ここでは省略しておりますchartのjavascriptでもdocument.writeが複数個所使用してありました。
また、yambejp　さんからご教示頂いたDOMを使用したソースがうまく動かなかったことから、
このチャートjavascriptに関してだけで言うと、document.writeでの読み込みでないとチャートjavascriptそのものが動かないのではないかと推測しました。

ご指導いただき、大変ありがとうございました。

深く御礼申し上げます。

Comments

[m.ts10806]

document.writeは非推奨の機能です。

[tajix_japan]

はい。解決したと思っていたのですが、解決できていませんでした。ここは一旦閉めてしまったので、ご指摘いただいた方法でいろいろ試してみます。もしかしたら再度同じ質問を上げることになりかもしれません。まずはいろいろ試してみます。有難うございました。