How to call a function in external javascript

In front-end development, we often encounter situations where we need to call functions in external JavaScript files. Normally, we can reference the external JavaScript function into the web page through the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, and then call it directly. But what if we want to dynamically call external functions in JavaScript code? This article will introduce how to call functions in external JavaScript files.

1. Reference external JavaScript files

Before calling external JavaScript functions, we need to reference external JavaScript files in the web page. You can use the following code to introduce external JavaScript files into the web page.

<script src="[文件路径]"></script>

Where [file path] is the path to the external JavaScript file. Note that the path should be relative to the path of the current page. If the external file is located in the same directory of the page, it can be referenced directly using the file name.

For example, if you want to reference an external JavaScript file named "script.js", you can use the following code to reference:

<script src="script.js"></script>

2. Use the window object to call external functions

After successfully referencing the external JavaScript file, we can use the window object to call the external function. The window object is a global object, which contains all global properties and methods, so you can use the window object to call external functions. The following is a code example of using the window object to call an external function:

//在外部函数文件script.js中定义test函数
function test(){
    alert("这是外部JavaScript文件中的test函数");
}

//在本页面中使用window对象调用test函数
window.test();

Note that when using the window object to call an external function, you need to ensure that the function has been defined and after referencing the external file.

3. Use AJAX technology to call external functions

In addition to using the window object to call external functions, you can also use AJAX technology to call external functions. AJAX technology can load data asynchronously to optimize the performance of web pages. The following is a code example that uses AJAX technology to call an external function:

//使用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();

In this code example, we use the XMLHttpRequest object to asynchronously load the external function file script.js, then use the eval function to inject the file into the page, and finally Call external functions. It should be noted that when using the eval function to inject code, you need to ensure that the code is safe, otherwise it will greatly harm the security of the website.

Summary:

The above is a method of calling functions in external JavaScript files, which can be achieved using window objects or AJAX technology. It should be noted that you should try to avoid frequently using AJAX technology to call external functions in web pages, so as not to affect the performance and user experience of the web pages. At the same time, when using the eval function to inject code, you need to ensure the security of the code.

The above is the detailed content of How to call a function in external javascript. For more information, please follow other related articles on the PHP Chinese website!