원리 분석: 1단계: DOM을 사용하여 <script> 또는 <link> 태그를 만들고 여기에 유형과 같은 속성을 첨부합니다. 2단계: 태그를 다른 태그(일반적으로 <head>)에 바인딩합니다.
.응용 프로그램
:
1. 코드 재사용을 개선하고 코드 양을 줄입니다.
2. 자바스크립트 컨트롤러와 세션을 추가하면 페이지 스타일이 동적으로 변경될 수 있습니다.
3. 페이지는 파일을 위에서 아래로 순차적으로 로드하고 동시에 로드하기 때문에 Bian은 다음과 같이 설명했습니다. 따라서 CSS 레이아웃 파일을 먼저 로드한 다음 CSS 미화 파일을 그림과 함께 표시한 다음 큰 falsh 파일을 로드하거나 중요도에 따라 로드하는 등 페이지 파일의 로드 순서를 제어하는 자바스크립트 컨트롤러를 추가할 수 있습니다. 콘텐츠.
읽기 팁: 전자글쓰기에 능숙하지 않은 초보자도 중국어를 직접 읽어본 후, 코드를 복사해서 사용해 볼 수 있습니다.
.js 또는 .css 파일을 동적으로 로드하려면 간단히 말해서 DOM 메서드를 사용하여 먼저 멋진 새 "스크립트" 또는 "링크" 요소를 만들고 여기에 적절한 속성을 할당한 다음 마지막으로 element.appendChild()를 사용하는 것을 의미합니다. 문서 트리 내의 원하는 위치에 요소를 추가하는 것은 실제보다 훨씬 더 멋진 것처럼 들립니다. 모든 것이 어떻게 결합되는지 살펴보겠습니다.
인용문은 다음과 같습니다.
함수 loadjscssfile(파일 이름, 파일 형식){
if (filetype=="js"){ //파일 형식 결정
var fileref=document.createElement('script')//태그 생성
fileref.setAttribute("type","text/javascript")//속성 유형의 값을 text/javascript로 정의합니다.
fileref.setAttribute("src", filename)//파일 주소
}
else if (filetype=="css"){ //파일 형식 결정
var fileref=document.createElement("링크")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", 파일 이름)
}
if(파일 형식 참조!="정의되지 않음")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //페이지가 열릴 때 브라우저가 동적으로 파일을 로드합니다.
loadjscssfile("javascript.php", "js") // 페이지가 열릴 때 브라우저는 "javascript.php"를 동적으로 로드합니다.
loadjscssfile("mystyle.css", "css") //페이지가 열릴 때 브라우저는 .css 파일을 동적으로 로드합니다.
다음 작업은 <head> 태그에 바인딩하는 것입니다. 바인딩할 때 한 가지 문제는 동일한 파일이 두 번 바인딩될 수 있다는 점입니다. 브라우저가 두 번 바인딩되면 예외는 없지만 효율성이 떨어집니다.
피하기 위해
새로운 전역 배열 변수를 추가하고 바인딩된 파일의 이름을 저장할 수 있습니다. 각 바인딩 전에 해당 변수가 이미 존재하는지 확인하세요. 존재하지 않습니다. 바인딩하십시오.
다음은 인용문입니다:
document.getElementsByTagName("head")[0].appendChild(fileref)
페이지의 HEAD 요소를 먼저 참조한 다음appendChild()를 호출하면 새로 생성된 요소가 HEAD 태그의 맨 끝에 추가된다는 의미입니다. 또한 추가 시 기존 요소가 손상되지 않는다는 점에 유의해야 합니다. 새 요소 - 즉, loadjscssfile("myscript.js", "js")를 두 번 호출하면 이제 둘 다 동일한 Javascript 파일을 가리키는 두 개의 새로운 "스크립트" 요소가 생성됩니다. 페이지에 중복 요소를 추가하고 프로세스에서 불필요한 브라우저 메모리를 사용하므로 효율성 관점에서 동일한 파일이 두 번 이상 추가되는 것을 방지하는 간단한 방법은 loadjscssfile()에 의해 추가된 파일을 추적하는 것입니다. 새 파일인 경우에만 파일을 로드합니다.
다음은 인용된 부분입니다.
var filesadd="" //파일 이름이 바인딩된 배열 변수를 저장합니다.
함수 checkloadjscssfile(파일 이름, 파일 형식){
if (filesadd.indexOf("["+filename+"]")==-1){//indexOf는 배열에 항목이 있는지 여부를 결정합니다.
loadjscssfile(파일 이름, 파일 형식)
files added+="["+filename+"]" //files added에 파일 이름을 추가합니다.
}
또 다른
Alert("파일이 이미 추가되었습니다!")//이미 존재하는지 확인
}
checkloadjscssfile("myscript.js", "js") //성공
checkloadjscssfile("myscript.js", "js") //파일이 중복되어 파일이 추가되지 않음
여기서는
계속 진행할지 여부를 결정하기 전에 추가되도록 설정된 파일이 변수 filesadd에 저장된 추가된 파일 이름 목록에 이미 존재하는지 확인하기 위해 대략적으로 감지하고 있습니다.
추가된 .js 또는 .css 파일을 실제로 제거하거나 교체하는 방법을 살펴보겠습니다.