js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

js 負荷動的

この記事の例では、js でスクリプトを動的に読み込む方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

最近、同社のフロントエンドマップ製品はモジュールに分割する必要があり、ユーザーが使用する機能に応じてどのモジュールをロードするかによって、ユーザーエクスペリエンスが向上することが期待されています。

そこで、js 動的スクリプトの読み込みを研究するためにあらゆる場所を検索しましたが、本当に悲しいです。 , インターネット上にはほぼ同じ記事が存在する、4つの方法私は他人の結果をコピーし、元の記事へのリンクを追加しない人を嫌います。なぜ！重要なのは、最後の方法はまだ少し間違っているということです。 2日間の調査と情報を経て、ここで皆さんと共有したいと思います。

まず、js ファイルをロードする必要があります。これを開いた後、その中に functionOne メソッドを記述します。

function functionOne(){
  alert("成功加载");
}

ログイン後にコピー

後続の html ファイルはすべて同じディレクトリに作成されます。

方法 1: 直接 document.write

次のコードを使用して、同じフォルダーに function1.html を作成します:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

ログイン後にコピー

document.write を通じてページにスクリプトを書き込むことができます。コードに示されているように、「Initial Load」ボタンをクリックした後に package.js ファイルをロードできますが、メソッド functionOne をすぐに実行するとロードできません。このメソッドは Report Error を見つけることができませんでしたが、2 番目のボタン (document.write によって動的に作成された「Test Running Effect」) をクリックすると、この時点でスクリプトが読み込まれていることがわかりました。このメソッドは非同期ロードであるため (次のコードの実行を継続しながら、ロードする必要があるスクリプトを実行するために追加のスレッドが開かれます)、document.write によってインターフェイスが書き換えられますが、これは明らかに実用的ではありません。

方法 2: 既存のスクリプトの src 属性を動的に変更する

次のコードを使用して、同じフォルダーに function2.html を作成します:

<html>
<head>
  <title></title>
  <script type="text/javascript" id="yy" src=""></script>
  <script type="text/javascript">
    function init()
    {
      yy.src = "package.js";
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

ログイン後にコピー

このメソッドの利点は、インターフェイス要素を変更せず、インターフェイス要素を書き換えないことです。ただし、非同期でロードされるため、同じ問題が発生します。

方法 3: スクリプト要素を動的に作成する (非同期)

次のコードを使用して、同じフォルダーに function3.html を作成します:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

ログイン後にコピー

2 番目の方法と比較したこの方法の利点は、最初にインターフェイスに script タグを記述する必要がないことです。欠点は、非同期ロードと同じ問題です。

これら 3 つのメソッドはすべて非同期で実行されるため、これらのスクリプトのロード中、メインページのスクリプトは引き続き実行されます。上記のメソッドを使用すると、次のコードは期待どおりの効果を発揮しません。

ただし、functionOne の前にアラートを追加して、メインページスクリプトの実行をブロックすることができます。その後、functionOne を実行できるか、後のコードを別のボタンで実行する必要があることがわかります。または、タイマーを定義し、一定時間後に次のコードを実行するだけですが、プロジェクト内でこれらのメソッドを使用することは絶対に不可能です。

実際、3 番目の方法は、いくつかの変更を加えることで同期読み込みに変更できます。

方法 4: スクリプト要素を動的に作成する (同期)

次のコードを使用して、同じフォルダーに function4.html を作成します:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

ログイン後にコピー

このメソッドは外部 js ファイルをロードしませんが、myScript にサブ項目を追加します。 Firefox、Safari、Chrome、Opera、IE9 では、このコードは正常に動作します。ただし、IE8 以前のバージョンではエラーが発生します。 IE は

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7378

Java チュートリアル

1628

CakePHP チュートリアル

1357

Laravel チュートリアル

1267

PHP チュートリアル

1216

Related knowledge

VirtualBox 固定ディスクをダイナミックディスクに、またはその逆に変換します Mar 25, 2024 am 09:36 AM

仮想マシンを作成するときに、ディスクの種類を選択するように求められます。固定ディスクまたはダイナミックディスクを選択できます。固定ディスクを選択した後でダイナミックディスクが必要であることに気付いた場合、またはその逆の場合はどうすればよいでしょうか? いいですね!一方をもう一方に変換できます。この記事では、VirtualBox 固定ディスクをダイナミックディスクに、またはその逆に変換する方法を説明します。ダイナミックディスクは、最初は小さいサイズですが、仮想マシンにデータを保存するにつれてサイズが大きくなる仮想ハードディスクです。ダイナミックディスクは、必要なだけのホストストレージスペースのみを使用するため、ストレージスペースを節約するのに非常に効率的です。ただし、ディスク容量が増加すると、コンピュータのパフォーマンスがわずかに影響を受ける可能性があります。仮想マシンでは固定ディスクとダイナミックディスクが一般的に使用されます

Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラーメッセージは、インストールされているプラグインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adobe Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラーメッセージが表示された場合は、次の操作を行うことができます。管理者として

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Stremio の字幕が機能しない; 字幕の読み込みエラー Feb 24, 2024 am 09:50 AM

Windows PC の Stremio で字幕が機能しませんか?一部の Stremio ユーザーは、ビデオに字幕が表示されないと報告しました。多くのユーザーが、「字幕の読み込みエラー」というエラーメッセージが表示されたと報告しています。このエラーとともに表示される完全なエラーメッセージは次のとおりです: 字幕の読み込み中にエラーが発生しました字幕の読み込みに失敗しました: これは、使用しているプラグインまたはネットワークに問題がある可能性があります。エラーメッセージにあるように、インターネット接続がエラーの原因である可能性があります。したがって、ネットワーク接続を確認し、インターネットが適切に機能していることを確認してください。これとは別に、このエラーの背後には、競合する字幕アドオン、特定のビデオコンテンツでサポートされていない字幕、古い Stremio アプリなど、他の理由が考えられます。のように

PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

Outlook にハイパーリンクを挿入するときにフリーズの問題が発生した場合は、不安定なネットワーク接続、古い Outlook バージョン、ウイルス対策ソフトウェアによる干渉、またはアドインの競合が原因である可能性があります。これらの要因により、Outlook がハイパーリンク操作を適切に処理できない可能性があります。ハイパーリンクの挿入時に Outlook がフリーズする問題を修正する次の修正プログラムを使用して、ハイパーリンクの挿入時に Outlook がフリーズする問題を修正します。インストールされているアドインを確認する Outlook を更新するウイルス対策ソフトウェアを一時的に無効にして、新しいユーザープロファイルの作成を試行する Office アプリプログラムを修正する Office をアンインストールして再インストールする始めましょう。 1] インストールされているアドインを確認する Outlook にインストールされているアドインが問題の原因となっている可能性があります。

See all articles

js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック