jQueryを使って実行時にJavaScriptをロードする方法

投稿日: 2019-11-05 2019-11-05
タグ: javascript, jquery

Webサイトのパフォーマンスを向上させ、ファイル全体のサイズのリターンを減らすために、必要なときにJavaSript（.js）ファイルをロードすることを検討することがあります。 jQueryでは、

$。getScript

関数を使用して、実行時または必要に応じてJavaScriptファイルをロードできます。

例えば、

$("#load").click(function(){
    $.getScript('helloworld.js', function() {
        $("#content").html('Javascript is loaded successful!');
    });
});

Idの “load”のボタンをクリックすると、 “helloworld.js ** ” JavaScriptファイルが動的に読み込まれます。

自分で試してみてください

この例では、ロードボタンをクリックすると、実行時に ”

sayhello（）

“関数を含む ”

js-example/helloworld.js

“がロードされます。

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>
<body>
  <h1>Load Javascript dynamically with jQuery</h1>

<div id="content"></div>
<br/>

<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>

<script type="text/javascript">

$("#load").click(function(){
  $.getScript('js-example/helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! sayHello() function is loaded!
     ');
  });
});

$("#sayHello").click(function(){
  sayHello();
});

</script>
</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-load-javascript-at-runtime.html[デモを試してください]

javascript

jquery

getdocs

13036