Динамически загружайте внешние файлы CSS и JS с помощью DOM, чтобы создавать теги <script> или <link> и прикреплять к ним атрибуты, такие как тип и т. д. Затем используйте метод AppendChild, чтобы привязать тег к другому тегу, обычно к <head>.
приложение:
1. Улучшите повторное использование кода и уменьшите его объем;
2. Добавьте контроллер JavaScript и сеанс для динамического изменения стиля страницы;
3. Поскольку страница загружает файлы последовательно сверху вниз и объясняет их во время загрузки, вы можете добавить контроллер JavaScript для управления порядком загрузки файлов страницы. Например, сначала загрузите файл макета CSS, а затем отобразите файл украшения CSS. с картинками Затем загрузите большой файл falsh или загрузите его в зависимости от важности содержимого.
В двух словах, динамическая загрузка файла .js или .css означает использование методов DOM, чтобы сначала создать шикарный новый элемент «script» или «LINK», присвоить ему соответствующие атрибуты и, наконец, использовать element.appendChild(). чтобы добавить элемент в нужное место в дереве документа. Это звучит намного более замысловато, чем есть на самом деле. Давайте посмотрим, как все это работает:
Следующая задача — привязка к тегу <head>. Одна из проблем при привязке заключается в том, что один и тот же файл может быть привязан дважды. Если браузер привязывается дважды, не будет никаких исключений, но эффективность будет низкой. Чтобы избежать этой ситуации, мы можем добавить новую глобальную переменную массива и сохранить в ней имя привязанного файла. Перед каждой привязкой проверять, существует ли он. Если он существует, он будет подсказывать, что он уже существует. не существует, свяжите его.
| document.getElementsByTagName("head")[0].appendChild(fileref) |
Если вы сначала ссылаетесь на элемент HEAD страницы, а затем вызываете метод addChild(), это означает, что вновь созданный элемент добавляется в самый конец тега HEAD. Кроме того, вы должны знать, что ни один существующий элемент не пострадает при добавлении. новый элемент - то есть, если вы дважды вызовете loadjscssfile("myscript.js", "js"), вы получите два новых элемента "script", оба указывающие на один и тот же файл Javascript. Это проблематично только из файла. с точки зрения эффективности, поскольку вы будете добавлять избыточные элементы на страницу и использовать ненужную память браузера в процессе. Простой способ предотвратить добавление одного и того же файла более одного раза — отслеживать файлы, добавленные с помощью loadjscssfile(). и загружайте файл только в том случае, если он новый:
| var filesadded="" //Сохраняем переменную массива, к которой привязаны имена файлов функция checkloadjscssfile(имя файла, тип файла){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf определяет, есть ли элемент в массиве loadjscssfile (имя файла, тип файла) filesadded+="["+filename+"]" //Добавляем имя файла в filesadded } еще 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", "таблица стилей") fileref.setAttribute("тип", "текст/css") fileref.setAttribute("href", имя файла) } если (typeof fileref!="не определено") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //Браузер динамически загружает файл при открытии страницы. loadjscssfile("javascript.php", "js") // Браузер динамически загружает "javascript.php" при открытии страницы. loadjscssfile("mystyle.css", "css") //Браузер динамически загружает файл .css при открытии страницы. |