자바스크립트에서 스크립트 요소 인스턴스의 동기 및 비동기 동적 생성에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-21 15:21:042631검색
동적으로 스크립트 요소 생성(비동기)
동일한 폴더에 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>두 번째 방법에 비해 이 방법의 장점은 스크립트를 작성할 필요가 없다는 것입니다. 시작 부분의 인터페이스 태그의 단점은 동일한 문제가 있는 비동기 로딩입니다.
이 세 가지 방법은 모두 비동기식으로 실행되므로 이러한 스크립트를 로드하는 동안 기본 페이지의 스크립트가 계속 실행됩니다. 위의 방법을 사용하면 다음 코드가 예상한 효과를 얻지 못합니다.
하지만 functionOne 앞에 경고를 추가하여 메인 페이지 스크립트 실행을 차단할 수 있습니다. 그렇지 않으면 나중에 코드를 다른 버튼에서 실행해야 합니다. 정해진 시간 이후에 다음 코드를 실행하도록 타이머를 정의하지만 프로젝트에서는 이러한 메서드를 사용하는 것이 확실히 불가능합니다.
사실 세 번째 방법은 몇 가지만 변경하면 동기 로딩이 될 수 있습니다.
스크립트 요소를 동적으로 생성합니다(동기적으로)
동일한 폴더에 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는 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 특수 요소로 취급하며 해당 하위 노드에 대한 DOM 액세스를 허용하지 않습니다. 그러나 다음 예와 같이 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소의 텍스트 속성을 사용하여 js 코드를 공식화할 수 있습니다.
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();이러한 수정 후의 코드는 IE, Firefox, Opera 및 Safari3 이상 버전에서 실행될 수 있습니다. 3.0 이전 버전의 Safari에서는 텍스트 속성을 올바르게 지원하지 않았지만 텍스트 노드 기술을 사용하여 코드를 지정할 수 있었습니다. 이전 버전의 Safari와 호환되어야 하는 경우 다음 코드를 사용할 수 있습니다.
var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();여기서 먼저 표준 DOM 텍스트 노드 방법을 사용해 보세요. IE8 이하를 제외한 모든 브라우저가 이 방법을 지원하기 때문입니다. 이 코드 줄에서 오류가 발생하면 IE8 이하를 의미하므로 text 속성을 사용해야 합니다. 전체 프로세스는 다음 함수로 표현될 수 있습니다:
function loadScriptString(code)
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
try{
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
}그런 다음 이 방법을 다른 곳에서 사용하여 필요한 코드를 로드할 수 있습니다. 실제로 이 방법으로 코드를 실행하는 것은 전역 함수의 eval()에 동일한 문자열을 전달하는 것과 같습니다.
위 내용은 자바스크립트에서 스크립트 요소 인스턴스의 동기 및 비동기 동적 생성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!