フロントエンド開発では、外部 JavaScript ファイル内の関数を呼び出す必要がある状況によく遭遇します。通常、 タグを通じて Web ページ内で外部 JavaScript 関数を参照し、それを直接呼び出すことができます。しかし、JavaScript コードで外部関数を動的に呼び出したい場合はどうすればよいでしょうか?この記事では、外部JavaScriptファイルで関数を呼び出す方法を紹介します。 </p> <p>1. 外部 JavaScript ファイルの参照</p> <p>外部 JavaScript 関数を呼び出す前に、Web ページで外部 JavaScript ファイルを参照する必要があります。次のコードを使用して、外部 JavaScript ファイルを Web に導入できます。ページ。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script src="[文件路径]">ログイン後にコピーここで、[ファイル パス] は外部 JavaScript ファイルへのパスです。パスは現在のページのパスを基準とした相対パスである必要があることに注意してください。外部ファイルがページの同じディレクトリにある場合は、ファイル名を使用して直接参照できます。 たとえば、「script.js」という名前の外部 JavaScript ファイルを参照する場合は、次のコードを使用して参照できます。 ログイン後にコピー 2. window オブジェクトを使用して外部ファイルを呼び出します。 function外部 JavaScript ファイルを正常に参照した後、window オブジェクトを使用して外部関数を呼び出すことができます。 window オブジェクトはグローバル オブジェクトであり、すべてのグローバル プロパティとメソッドが含まれているため、window オブジェクトを使用して外部関数を呼び出すことができます。以下は、window オブジェクトを使用して外部関数を呼び出すコード例です。 //在外部函数文件script.js中定义test函数 function test(){ alert("这是外部JavaScript文件中的test函数"); } //在本页面中使用window对象调用test函数 window.test();ログイン後にコピーwindow オブジェクトを使用して外部関数を呼び出す場合は、関数が定義されていること、および参照後に関数が定義されていることを確認する必要があることに注意してください。外部ファイル。 3. AJAX テクノロジを使用して外部関数を呼び出すウィンドウ オブジェクトを使用して外部関数を呼び出すだけでなく、AJAX テクノロジを使用して外部関数を呼び出すこともできます。 AJAX テクノロジーは、データを非同期的にロードして、Web ページのパフォーマンスを最適化できます。以下は、AJAX テクノロジを使用して外部関数を呼び出すコード例です。 //使用XMLHttpRequest对象加载外部函数文件script.js var xhr=new XMLHttpRequest(); xhr.open('GET','script.js',true); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ //将外部函数文件注入页面中 eval(xhr.responseText); //调用外部函数 test(); } } xhr.send();ログイン後にコピー このコード例では、XMLHttpRequest オブジェクトを使用して外部関数ファイル script.js を非同期的にロードし、その後 eval 関数を使用してファイルをページに挿入し、最後に外部関数を呼び出します。 eval 関数を使用してコードを挿入するときは、コードが安全であることを確認する必要があることに注意してください。そうしないと、Web サイトのセキュリティが大きく損なわれることになります。 概要: 上記は、外部 JavaScript ファイル内の関数を呼び出す方法であり、ウィンドウ オブジェクトまたは AJAX テクノロジを使用して実現できます。 Web ページのパフォーマンスやユーザー エクスペリエンスに影響を与えないように、Web ページで外部関数を呼び出すために AJAX テクノロジを頻繁に使用することは避ける必要があることに注意してください。同時に、eval 関数を使用してコードを挿入する場合は、コードのセキュリティを確保する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
