• ベストアンサー

呼出したjsファイル内で他jsファイルを呼出したい

LOHAの回答

  • ベストアンサー
  • LOHA
  • ベストアンサー率52% (203/388)
回答No.5

>function JavaScriptLoader(src, callback){ >のcallbackの意味がまったく分かりません。 >関数の引数であるcallbackとどう繋がっているのでしょうか??? >callbackにはあらかじめ何を渡しておけば良いのでしょうか??? 例えば、a.js、b.jsの順で読み込ませたい場合、a.jsを読み込みが完了したことを確認してから、b.jsを読み込ませることになります。 こういった(非同期の)処理の場合は、a.jsが読み込み終わったときに、ある関数を呼び出すようにする、という定石があります。その「ある関数」内でb.jsを読み込ませればよい、という仕組みです。 参考サイトに掲載されていたJavaScriptLoader関数はそのような仕組みでできており、ロード完了時に呼び出される「ある関数」が第2引数であるcallbackです。 #このような関数のことを、コールバック関数と呼びます。それが引数callbackの名前の由来です。 #http://e-words.jp/w/E382B3E383BCE383ABE38390E38383E382AFE996A2E695B0.html >if (sc.readyState == 'complete') callback(sc.readyState); >if (sc.readyState == 'loaded') callback(sc.readyState); このような内部構造はとりあえず理解しなくても大丈夫だと思うので、簡単な使い方だけ書いておきます。 JavaScriptLoader("a.js", function(state) {  // a.js内の関数などを利用する処理  JavaScriptLoader("b.js", function(state) {   // a.js, b.js内の関数などを利用する処理  }); }); #callback関数である無名関数の第一引数にstateを指定していますが、これはなくてもOKです。 >2つめのリンクからJSLoderをダウンロードして試してみました。 >しかし、これはあらかじめjsloader.jsを読み込んでおかなければならず、piyo.js内では... jsloader.jsの中身をpiyo.js内にコピーしてしまえば良い(ライセンスには気をつけましょう)、といえばそれまでなのですが、結構量あるのでJavaScriptLoaderの方が手軽かもしれませんね。 #両方を組み合わせる手もありですが、それはそれで冗長かな。 以上です。 解決されることをお祈りします。

okimuk2050
質問者

お礼

回答ありがとうございます。 できました!! ずいぶん時間がかかってしまいましたが、 JavaScriptLoaderがどういう処理を行なっているのか、 なぜ教えていただいた方法で呼び出すことができるのか、 も含めてすべて解決いたしました! 親切丁寧に教えていただいてほんと感謝感謝です!

関連するQ&A

  • *.js ファイルの読み込みについて

    お世話になります。 *.jsファイルを読み込むのに <script type='text/javascript' src='abc.js'></script> とすれば、できます。 これを、 <script type="text/JavaScript"> <!-- src='abc.js; ・・・・・・・・・ ここにabc.js内の関数などを記載 ・・・・・・・・・ //--> </script> と、いう形にできないものでしょうか。 このままだと、abc.jsは読み込まれません。 よろしくお願いします。

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js(jquery使用)を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • 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箇所にコピー&ペーストするようなイメージで) お手数ですが、ご教示のほど、宜しくお願い致します。

  • <head>外での、外部css、外部jsの読み込み

    基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 (HTML 4.01 Transitional) そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか? まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。

  • ディレクトリ内のファイルをDLできないように?

    javascriptのファイルを、hoge.com/js/script.jsというように保存し、 <script type="text/javascript" src="js/script.js"></script> というようにhtmlに記述することが多いと思います。 しかしブラウザで直接ttp://www.hoge.com/js/script.jsをURLに記述するとこのファイルがダウンロードできてしまいます。 ※httpと記述するとこのページでリンクがでてしまうのであえてttpとしています。 ダウンロードができないようにするにはどのようにすればよいのでしょうか? jsフォルダ直下に.htaccessを置いて記述すれば良いような気もするのですが、そもそもjsフォルダ内のファイルを「ダウンロードできないようにする」という記述方法がわかりません。 もしくは他の方法があれば教えてください。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • なぜ外部jsファイルはコメントアウトが必要ないのか?

    htmlに直接Javascriptを書く場合は、非対応ブラウザへの考慮としてコメントアウトを記述せよと教わりました。以下のように書けば良いんですよね? <script type="text/javascript"> <!-- (スクリプト) //--> </script> しかし思ったのですが、外部jsファイルを呼び出す場合はこうなります。 <script type="text/javascript" src="script.js"></script> コメントアウトは記述されていません。また、過去勉強中にさまざまなサイトからサンプルをダウンロードして見てましたが、jsファイルの方にコメントアウトが記述されていることもありませんでした。つまりこのやり方ですとコメントアウトがまったく出てこないわけですが、これはなぜでしょうか? もう1つお聞きしたいのですが、もしコメントアウトを記述しないでそのhtmlファイルをJavascript非対応ブラウザで見た場合、どのような挙動をするのでしょうか?

  • javascriptの外部ファイル読み込みの不具合

    質問させて頂きます。 javascript初心者です。 現在サイト作成にあたり、jsを組み込んでおります。 ajaxmailを設置しようと、参考サイトの手順通りに行ったのですが、 <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> の記述をすると、他のjsが動作しなくなってしまいます。 現在読み込んでいるものをコピペさせて頂きます。 <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script src="./js/mapstyle.js"></script> <script src="./js/modernizr.custom.min.js"></script> <script src="./js/jquery-1.10.2.js"></script> <script src="./js/hoge.js"></script> <script src="./js/jquery.smooth-scroll.min.js"></script> <script src="./js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="./js/lightview.js"></script> 下2行がajax設置の際に読み込むものです。 lightview.jsだけの場合は機能しています。 どなたかご教示の程、よろしくお願い致します。

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1~4.js の行を全てコメントアウトすると、エラーはでません。 1~4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1~4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • js.ファイルの呼び込み

    http://village.infoweb.ne.jp/~tkiku/wsp/java/java39.html の万年カレンダーですが、このソースを外部ファイルとして「cal.js」と作成。HTMLのhed内に <script type="text/javascript" src="script/cal.js"></script>を記述。<body>内で <form><input type="button" value="カレンダ表示" onclick="dispkoyomi()"></form>とボタンで呼び出すには、またはテキストでの呼び出しはどのようにしたらいいのでしょうか?。

  • Jqueryの干渉について

    Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの2つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。