외부 자바스크립트에서 함수를 호출하는 방법

프런트 엔드 개발에서는 외부 JavaScript 파일에서 함수를 호출해야 하는 상황에 자주 직면합니다. 일반적으로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 통해 외부 JavaScript 함수를 웹페이지에 참조한 다음 직접 호출할 수 있습니다. 하지만 JavaScript 코드에서 외부 함수를 동적으로 호출하려면 어떻게 해야 할까요? 이 기사에서는 외부 JavaScript 파일에서 함수를 호출하는 방법을 소개합니다.

1. 외부 JavaScript 파일 참조

외부 JavaScript 함수를 호출하기 전에 웹 페이지에서 외부 JavaScript 파일을 참조해야 합니다. 다음 코드를 사용하여 외부 JavaScript 파일을 웹 페이지에 도입할 수 있습니다.

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

여기서 [파일 경로]는 외부 JavaScript 파일의 경로입니다. 경로는 현재 페이지의 경로에 상대적이어야 합니다. 외부 파일이 페이지의 동일한 디렉터리에 있는 경우 파일 이름을 사용하여 직접 참조할 수 있습니다.

예를 들어 "script.js"라는 외부 JavaScript 파일을 참조하려는 경우 다음 코드를 사용하여 참조할 수 있습니다.

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

2. 창 개체를 사용하여 외부 함수를 호출합니다.

외부 참조에 성공한 후 JavaScript 파일에서는 창 개체를 사용하여 외부 함수를 호출할 수 있습니다. window 개체는 모든 전역 속성과 메서드를 포함하는 전역 개체이므로 window 개체를 사용하여 외부 함수를 호출할 수 있습니다. 다음은 창 개체를 사용하여 외부 함수를 호출하는 코드 예제입니다.

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

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

창 개체를 사용하여 외부 함수를 호출하는 경우 해당 함수가 정의되었는지 확인하고 외부 파일을 참조한 후 확인해야 합니다.

3. AJAX 기술을 사용하여 외부 함수 호출

창 개체를 사용하여 외부 함수를 호출하는 것 외에도 AJAX 기술을 사용하여 외부 함수를 호출할 수도 있습니다. AJAX 기술은 데이터를 비동기적으로 로드하여 웹 페이지의 성능을 최적화할 수 있습니다. 다음은 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 함수를 사용하여 파일을 페이지를 열고 마지막으로 외부 함수를 호출합니다. 코드를 삽입하기 위해 평가 기능을 사용할 때 코드가 안전한지 확인해야 합니다. 그렇지 않으면 웹사이트의 보안이 크게 손상될 수 있습니다.

요약:

위는 외부 JavaScript 파일에서 함수를 호출하는 방법으로, 창 개체나 AJAX 기술을 사용하여 구현할 수 있습니다. 웹 페이지의 성능과 사용자 경험에 영향을 주지 않으려면 웹 페이지에서 외부 기능을 호출하기 위해 AJAX 기술을 자주 사용하지 않는 것이 좋습니다. 동시에 eval 함수를 사용하여 코드를 삽입할 때 코드의 보안을 보장해야 합니다.

위 내용은 외부 자바스크립트에서 함수를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!