コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > Javascript ファイルの動的ロード - Wu Tongwei の blog_html/css_WEB-ITnose

Javascript ファイルの動的ロード - Wu Tongwei の blog_html/css_WEB-ITnose

WBOY
リリース： 2016-06-21 08:58:17
オリジナル
1016 人が閲覧しました

JavaScript ファイルの動的読み込み

著者: towaywu

2016-01-28 17 :26:24.0

29 ビュー

カテゴリ: HTML/CSS/JAVASCRIPT プログラミング言語

JavaScript ファイルは動的にロードされますインターネットにアップロードする一般的な方法のような面倒なことです:

コード名

function loadjs(fileurl){  var sct = document.createElement("script");  sct.src = fileurl;  document.head.appendChild(sct);}
ログイン後にコピー

それでは結果をテストしてみましょう:

コード名

<html>   <head>      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />   </head>   <body>       <script>
ログイン後にコピー
        function loadjs(fileurl){                      var sct = document.createElement("script");          sct.src = fileurl;          document.head.appendChild(sct);        }        loadjs("http://code.jquery.com/jquery-1.12.0.js");        loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")                loadjs("http://bootboxjs.com/bootbox.js")
ログイン後にコピー
       </script>   </body></html>
ログイン後にコピー

コードをロードすると、以下のようなエラーが表示されます

jquery は最初の処理でロードされるのは明らかですが、それでも jQuery が存在しないと報告されるのはなぜですか? この方法でロードすることは 3 つのスレッドを開くことと同じですが、jquery ファイルが最初にスレッドを開始し、それにかかる時間がかかるからです。 jquery がこのスレッドの実行を完了するには次の 2 回の時間がかかるため、実行が完了した後、jquery オブジェクトが見つからない可能性があります。実際には、このメソッドはどのように対処すればよいでしょうか。ファイルのロードにはステータス処理があります。 onload イベントは、ファイルがロードされたかどうかを監視できるイベントです。 したがって、このメソッドを使用して、必要な結果を処理することができます。改良されたコードは次のとおりです。

OK、このコードを実行すると、前のファイルがロードされるまでロードされたファイルはロードされないため、使用されたオブジェクトはロードされません。

次に、ポップアップ ボックスのエフェクトを実行します。コードでは Bootbox.js プラグインが使用されます。読み込みコードは次のとおりです。 
                       
            

                
著者別の最新記事

                
            

            

                
最新の問題

                

                                        

                        

                            function_exists() はカスタム関数を決定できません
                            Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
                            

                                

                                     から 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
3

                                    
2076

                                

                            

                        

                    

                    

                                        

                        

                            Google Chromeのモバイル版を表示する方法
                            こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
                            

                                

                                     から 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
11

                                    
2238

                                

                            

                        

                    

                    

                                        

                        

                            子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。
                            最初の 2 つの文は実行可能ですが、最後の文は実装できません。
                            

                                

                                     から 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
1883

                                

                            

                        

                    

                    

                                        

                        

                            親ウィンドウには出力がありません
                            document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
                            

                                

                                     から 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1765

                                

                            

                        

                    

                    

                                        

                        

                            CSS マインド マッピングに関するコースウェアはどこにありますか?
                            コースウェア
                            

                                

                                     から 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1799

                                

                            

                        

                    

                    

                                    

            


            

                

                    
関連トピック

                    詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート