JS를 동적으로 삽입하고 콜백 함수를 즉시 실행하는 방법

JS를 동적으로 삽입하고 콜백 함수를 즉시 실행하는 방법_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:04:33

원래의

1545명이 탐색했습니다.

본 글의 예시에서는 JS를 동적으로 삽입하고 콜백 함수를 바로 실행하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.id = id;
 script.onload = script.onreadystatechange = function(){
  alert(script.readyState);
  if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
  script.onreadystatechange = script.onload = null
  if(callback) callback();
 }
 document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>

로그인 후 복사

js 파일의 동적 삽입은 페이지 로딩 속도와 도메인 간 문제를 개선하는 데 매우 중요한 역할을 합니다. 위의 내용은 간단한 예입니다.

Onreadystatechange는 ie에서 지원되지만 onload는 지원되지 않습니다

Onload는 Firefox에서 지원되지만 onreadystatechange는 지원되지 않습니다

즉, 반드시 로드되거나 트리거가 완료되는 것은 아니며 둘 다 트리거되므로 또는를 사용하여 판단하세요.

script.onreadystatechange 및 script.readyState의 대소문자 형식은 대소문자를 구분하지 않으므로 찾기 쉽지 않은 오류가 발생할 수 있다는 점에 유의해야 합니다.

더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "JavaScript 전환 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 특수효과 및 기법 요약", "JavaScript 오류 및 디버깅 기술 요약", "JavaScript 데이터 구조 및 알고리즘 기법 요약", "JavaScript 순회 알고리즘 및 기법 요약" 및 "JavaScript 수학적 연산 사용법 요약"

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.