外部スクリプトファイルの読み込み

今回は getScript です。
外部に Script をまとめて置きした、任意の状態の場合に読み込みを行う為によく使用します。

callback に対応していたりと意外と便利なのですが、レスポンシブ対応が増えたことにより
使用する機会が無くなりました。
それに伴い、当 Blog に記載する機会は余りないかなと思っていました。

しかし、既存サイトの改修を行う際に、Javascript で HTML の大きな切り替えが有りました。
その際に click に対して on を設定し直さないと正常に処理が続行できない問題が発生しました。

新規案件であれば考慮して作成するのですが「既存サイトの場合は基本的に現状維持」がモットーの為、
その処理が発生した場合に場合にのみ外部の Script を読み直すことにしました(笑)
折角なので備忘録的にも記載しておこうかと思います。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#main_select').change( function() {

                    selectVal = $(this).val();
                    switch ( selectVal ) { 
                        case '1':
                            $.getScript("./sample_1645_script1.js");
                            break;
                        case '2':
                            $.getScript("./sample_1645_script2.js");
                            break;
                    }

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <select id="main_select">
                <option >No Select</option>
                <option value="1">Run Sample1</option>
                <option value="2">Run Sample2</option>
            </select>
        </div>

    </body>
</html>

■「Run Sample1」で実行するJavascript

alert('sample1.js');

■「Run Sample2」で実行するJavascript

alert('sample2.js');

sample

sample の Select を変更すると、指定した外部の Script を実行します。

今回のサンプルでは「だから何・・・」といった状況なのですが、特定のタイミングの時に
だいぶスクリプトを読みたい時に便利です。
 #例えば API の Callback にて処理したい場合など

折角なので今後も色々な所で使って行きたいと思います。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です