• ベストアンサー

外部ファイルを実行

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

  • ENTRE
  • お礼率0% (16/2521)

質問者が選んだベストアンサー

  • ベストアンサー
  • wp_
  • ベストアンサー率54% (132/242)
回答No.2

当方、本日手が空いたので色々試行錯誤してみましたが 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とかにありそうな気はしますけどね。 使ったことないですが。

その他の回答 (2)

回答No.3

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;  }

  • swqamy
  • ベストアンサー率37% (11/29)
回答No.1

<input type="button" value="サンプル" onClick="Sample()"> これで出来ると思います 「Sample()」 この部分を「test.js」で作成した関数に置き換えれば実行できると思います。

関連するQ&A

  • 外部ファイル

    HTMLに、このような記述があり <script type="text/javascript" src="●●●.js"></script> 外に、「●●●.js」 というファイルがあります。 これは、「外部のjavascript」ファイルということでしょうか? また、この、「外部のjavascript」ファイルを開く(見る)には、どうしたらいいのでしょうか? ^^ どこか、おすすめのjavascriptのサイト、ご存知でしたら、教えてください。。。^^ (CSS外部ファイル。までは意味、わかるのですが、 javascript の関係はよくわかりません)

  • 複数の外部ファイルを参照するにはどうすればいいの?

    22歳男性です。 htmlに以下のように記述していますがうまく動作しません。 <html> <head> <script type=\"text/javascript\" src=\"js1ファイルパス\"></script> <script type=\"text/javascript\" src=\"js2ファイルパス\"></script> </head> <body> ・・・・・・・ 上記のように記述して外部のjsファイルを参照しようとしているんですがうまくいきません。js2ファイルは参照できるんですが、js1ファイルは参照できません。 また、記述順を変えてみると、js1ファイルは参照でき、js2ファイルが参照できなくなります。 この2つのjsファイルを参照するにはどのように記述するべきなのでしょうか?

  • 外部 js ファイルの動的読み込み

    通常、HTML で外部の Javascript ファイルを読み込む必要がある場合、 <script type="text/javascript" src="****.js"></script> としますが、これを Javascript のコード内で行いたい場合、何か方法はあるでしょうか? いわゆる、Perl での use や php での require のようなことを Javascript で実現したい - 動的に js ファイルを読み込みたいのです。 以上、お分かりになる方、よろしくお願いします。

  • javascriptファイルは1つに統合できますか

    javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 <現状> <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか? (単純に1箇所にコピー&ペーストするようなイメージで) お手数ですが、ご教示のほど、宜しくお願い致します。

  • IE8で外部jsファイルが読み込めない

    htmlでjavascriptを使用しようとhtmlファイルとjsファイルを同階層に置き、下記のように外部jsファイルを読み込んでいます。 <script type="text/javascript" src="./com.js"></script> しかし、IE8でそのhtmlを開くと 「メッセージ: 文字が正しくありません。ライン: 1文字: 1コード: 0 URI: file:///C:/Users/PCUser/Desktop/test/common/js/com.js」 というエラーが発生してjavascriptが読み込めません。 秀丸でsrc="./com.js"をクリックするとソースが表示されるのでパスは間違えていないと思います。 また、簡単なボタン押下時にalertを表示するscriptを作成して確認したところ、FIRE FOXでは正常に動きましたが、IE8ではやはり動きませんでした。 文字コードはhtml、javascript共にshift-jisです。 他にjavascriptを読み込めない原因は何かありますでしょうか? よろしくお願いいたします。

  • 結果のなかにさらにjavascript

    HTML部に <script type=\"text/javascript\" src=\"test.php\" ></script> を記述して 外部のphpスクリプトを実行した結果を表示させたり、 ることは出来るのですが、 結果のなかにさらにjavascriptを記述して実行しても作動しません。 <script type=\"text/javascript\" src=\"test.php\" ></script> で返ってきたデータにはJavascriptは記述できないのでしょうか? よろしくお願いします。

  • 外部スクリプトでどうしてもエラーが出ちゃう!

    こんにちわ。 早速なんですが、外部スクリプトに文章を入れてhtmlに記述したスクリプトでその文章を読み出そうとしてるんですが、 つまり外部スクリプト(ファイル名:test.js)の中は abc="あ~テストテストってこんな感じに書いて"; des="<FONT size="-1">にこめのテスト</FONT>"; って書いてhtmlの中に書くスクリプトは <html> <head><SCRIPT src="test.js"type="text/javascript"language="javascript"></SCRIPT> </head> <body> <SCRIPT type="text/javascript"> <!-- document.write(abc); // --> </SCRIPT> <SCRIPT type="text/javascript"> <!-- document.write(des); // --> </SCRIPT> </body> </html> って感じなんですが、これを開くと エラー';'がありません。 エラー'abc'は宣言されていません エラー'des'は宣言されていません ってでくるんです。もちろん、test.jsへのパスはあってます。 何か書き方が違っていましたら教えてください。

  • 外部読み込みで動かないときの対処法

    プログラミングの入口にも立っていない初心者です。 あるプログラムを導入することになりました。 htmlに直接記述した場合はjsが動いていることが確認ができるのですが、外部読み込みにした場合、なぜか動きません。 記述方法がまちがっているのでしょうか? サイト運営の手間を考えて、絶対外部読み込みにする必要があります。 。 《動く…jsをhtmlに直接記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <!-- その他のhtml記述は省略 --> <script type="text/javascript"> <!-- document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); // --> </script> <script type="text/javascript"> <!-- (function() { var pc = new predicta.PClick(); pc.start(); })(); // --> </body> 《動かない…js外部読み込みの記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.sample.net/hoge/js/sample.js"></script> </head> ------------------------------------------------------ js/sample.jsの記述 ------------------------------------------------------ document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); (function() { var pc = new predicta.PClick(); pc.start(); })(); ちなみに、その他にも外部読み込みし、動いているJavaScriptはあります。 ご教示のほど、どうぞよろしくお願いいたします。

  • 外部リンクについて質問です。

    通常のリンクは下のような感じで外部から呼び出してきますが、 <script type="text/javascript" src="1.js"></script> 例えば、変数Formにアドレスが代入してある場合どのようにsrcに記述したらいいのでしょうか? document.write(Form); で確認すると、ちゃんと「1.js」と出ます。 FormはJavaScript内での変数です。 色々試して、 <script type="text/javascript" src="Form"></script> <script type="text/javascript" src=Form></script> など、他にもいくつか試しましたがうまくいきません。 代入値をアドレスとして使えないのでしょうか? もう完全に行き詰って全く分かりません。 すみませんが分かる方よろしくお願いします。

  • 外部呼出しのjsファイルについて

    外部呼出しするファイルを直接HTML内に記述したいのですがどのようにしたらよいのかわかりません。 ご存知の方がいましたらお教えください。 通常の方法は分かるのですが... <script LANGUAGE="javascript" src="xxx.js"></script> このような形で記述したいです。 <script LANGUAGE="javascript"><!-- src="xxx.js"; //--> </script>