外部ファイルを実行

質問

javascriptで
<script type="text/javascript" src="test.js" ></script>
を記述すると、
HTML読み込み時にtest.jsを実行するのですが、
ボタンクリック時に外部ファイルを実行するコードはどのように記述すればいいのでしょうか？

よろしくお願いします。

回答No.2

wp_ · ベストアンサー

当方、本日手が空いたので色々試行錯誤してみましたが
javascriptを動的に呼び出すのは少し難しいようですな。

[test.js]
function test() { alert('moge'); }
というファイルがあるとして、

[例1]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
function on(){
　document.write('<script type="text/javascript" src="./test.js"></script>');
}
// --></script>

これだとグローバルスコープでtest.jsの定義が使えるのですが、
画面が再描画されるため意図した動作をせず。
再描画させず、意図させた場所のみ更新させHTMLparseを行わせるという挙動ってできるのですかねぇ。

[例2]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
var jsStr = "";
function on(){
　getCode();
　eval(jsStr);
　test();
}

function getXMLHTTPObj(){
　try{
　　return new ActiveXObject("Msxml2.XMLHTTP");
　}catch(e){
(snip.)
　}
}
function getCode(){
　// make instanse
　var reqSend = getXMLHTTPObj();
　// get instanse
　if(reqSend){
　　reqSend.onreadystatechange = function(){
　　　if(reqSend.readyState == 4 ){
　　　　jsStr = reqSend.responseText;
　　　}
　　}
　　reqSend.open('POST', "./test.js", false);
　　reqSend.setRequestHeader('content-type', "application/x-www-form-urlencoded;charset=UTF-8;");
　　reqSend.send();
　}
}
// --></script>

XMLHTTPで呼んでevalしてみる。
使えなくもないですが・・・・
最初から<script>で呼べよという話に。

[例3]
<script src="common1.js"></script>
<script src="common2.js"></script>
<script src="common3.js"></script>
<script src="test.js"></script>(typeはsnip)
<input type="button" onclick='test()' />

スタンダード。
必要な奴は必要なときに逐次呼ぶのが普通。

外部読み込みはprototype.jsとかにありそうな気はしますけどね。
使ったことないですが。

回答No.3

神崎 渉瑠（@taloo）

test.jsの中身を関数に入れて普通に呼び出すのを推奨。

test.js
alert('test');

となっていたら以下の様に書き換え

function Click(){
alert('test');
}

<input type="button" value="click" onclick="Click();">

以下は、ご参考まで。
test.jsは関数に入れない状態で作ってください

function Click(){
var s=document.createElement('script');
s.type='text/javascript';
s.src='test.js';
var hd=document.getElementsByTagName('head');
hd=hd.item?hd.item(0)||hd[0]:hd[0];
hd.appendChild(s);
}

<input type="button" value="click" onclick="Click();">

基本はJSONP（DOM？）のそれと同じです。
headに入れてますが、document.bodyに入れても機能します。（エラーチェック等つけてください）

.jsファイルに対してPOSTメソッドを受け付けないサーバー（サービス/会社）があるので、GETの方がいいかもです。

同期接続にするなら、readyStateをチェックしなくても
ActiveXObject、XMLHttpRequestともに、send()した直後からresponseTextやresponseXMLを使用できます。

　if(reqSend){
　　reqSend.open('GET', "./test.js", false);
　　reqSend.send();
　　jsStr = reqSend.responseText;
　}

回答No.1

swqamy

<input　type="button"　value="サンプル"　onClick="Sample()">
これで出来ると思います

「Sample()」
この部分を「test.js」で作成した関数に置き換えれば実行できると思います。