onClickで外部JavaScriptファイルを読み込む方法

サイトとは別の外部の業者が提供しているJavaScriptがあり、このJavaScriptファイルを、ページ内のimgのonClickで読み込むことは可能でしょうか。

動画配信のASP事業者が提供しているJavaScriptなのですが、読み込みと同時に再生してしまい、当方で用意するimgをクリックすることで再生させたい、と考えています。

外部JavaScriptで動的に生成されるものですので、ページ内にあらかじめfunctionを作って、中身を抜き出して入れておいて、onclick=playmovie()、などということができず、どうしたものかと考えています。

行動規範の内容に同意します

回答3件

ベストアンサー

権利の問題についてはyambejpさんが言われている通りなのでやり方だけ。

Javascript
1var script = document.createElement("script");
2script.src = "delay.js"; // 読み込みたい外部JSのURL
3document.body.appendChild(script);

scriptタグを任意のタイミングで生成、srcでURLを指定、bodyにappendすることで、あとからスクリプトを追加出来ます。以下のサンプルでは、ボタンを押すとdelay.jsが読み込まれ、コンソールにdelayと出力されます。

sample.html

HTML
1<html>
2	<head>
3		<script>
4		function delay() {
5var script = document.createElement("script");
6script.src = "delay.js";
7document.body.appendChild(script);
8		}
9		</script>
10	</head>
11	<body>
12		<button onclick="delay()">button</button>
13	</body>
14</html>

delay.js

Javascript
1console.log("delay");

投稿2016/07/06 06:30

masaya_ohashi

総合スコア9210

yoshi123

2016/07/06 10:24

ありがとうございます。まさにこちらのやり方をベースに記述したら要件が実現できました。助かりました。

hideprog

2019/06/17 10:30

外部から申し訳ございません、同じように、画像クリック時に自サイトないのjsを呼び出すにはどのように記述すればようでしょうか？？

行動規範の内容に同意します

必要なjavascriptがすべて外部化されていて、自サイトがその仕様に
完全に合わせることができるなら、公開されたjavasriptは流用することが可能でしょう
ただし外部のスクリプトに著作権があるかどうかは別の話。
他人の権利物を勝手に利用するとそれなりのペナルティがありますのでご注意ください

投稿2016/07/06 05:30

yambejp

総合スコア118218

yoshi123

2016/07/06 05:36

早速の回答、ありがとうございます。質問の仕方がわかりづらかったようで申し訳ありませんが、どのように流用するのか、技術的なコーディング方法を知りたいのです。ご存知でしたら教示いただけると助かります。

yambejp

2016/07/06 05:41

その外部jsファイル次第なので、とりあえず読み込んで該当しそうな関数を実行して見ながら試すしかないでしょう。ライブラリ化して公開しているならともかく、そうでないならイレギュラーなやり方なので一般的なやり方など存在しません。

yoshi123

2016/07/06 10:21

ありがとうございます。 jsファイル内の関数を外部から実行するのではなく、jsファイルをページのロード時以外で（ボタンクリックで）読み込む、という要件になります。上の方の回答で解決できました。

行動規範の内容に同意します

こういうことですか？

JavaScript
1document.addEventListener( 'DOMContentLoaded', function() {
2	document.getElementById( 'test' ).addEventListener( 'click', function() {
3		( function() { /* ASPの用意しているのってこういうコードですかね？ */ } )();
4	}, false );
5} );