DOM을 사용하여 외부 CSS 및 JS 파일을 동적으로 로드하여 <script> 또는 <link> 태그를 생성하고 해당 태그에 유형 등의 속성을 첨부합니다. 그런 다음 AppendChild 메서드를 사용하여 태그를 다른 태그(일반적으로 <head>)에 바인딩합니다.
애플리케이션:
1. 코드 재사용을 개선하고 코드 양을 줄입니다.
2. 페이지 스타일을 동적으로 변경하려면 자바스크립트 컨트롤러와 세션을 추가하세요.
3. 페이지는 파일을 위에서 아래로 순차적으로 로드하고 로드하면서 설명하므로 JavaScript 컨트롤러를 추가하여 페이지 파일의 로드 순서를 제어할 수 있습니다. 예를 들어 CSS 레이아웃 파일을 먼저 로드한 다음 CSS 미화 파일을 표시합니다. 그런 다음 대용량 falsh 파일을 로드하거나 내용의 중요도에 따라 로드합니다.
.js 또는 .css 파일을 동적으로 로드하려면 간단히 말해서 DOM 메서드를 사용하여 먼저 멋진 새 "스크립트" 또는 "링크" 요소를 만들고 여기에 적절한 속성을 할당한 다음 마지막으로 element.appendChild()를 사용하는 것을 의미합니다. 문서 트리 내의 원하는 위치에 요소를 추가하는 것은 실제보다 훨씬 더 멋진 것 같습니다.
다음 작업은 <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") //파일이 중복되어 파일이 추가되지 않음 |
함수 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 파일을 동적으로 로드합니다. |