Принцип анализа: Шаг 1. Используйте DOM для создания тегов <script> или <link> и прикрепите к ним атрибуты, такие как тип. Шаг 2. Используйте метод AppendChild для привязки тега к другому тегу, обычно к <head>. .Приложение
:
1. Улучшите повторное использование кода и уменьшите его объем.
2. Добавление контроллера JavaScript и сеанса может динамически изменять стиль страницы.
3. Поскольку страница загружает файлы последовательно сверху вниз и загружает их одновременно, объяснил Биан; поэтому вы можете добавить контроллер JavaScript для управления порядком загрузки файлов страниц, например, сначала загружать файл макета CSS, затем отображать файл украшения CSS с изображениями, а затем загружать большой файл falsh или загружать в зависимости от важности содержание.
Совет по чтению: новички, которые не умеют писать электронные письма, могут читать по-китайски напрямую, а затем скопировать код и опробовать его.
В двух словах, динамическая загрузка файла .js или .css означает использование методов DOM, чтобы сначала создать шикарный новый элемент «script» или «LINK», присвоить ему соответствующие атрибуты и, наконец, использовать 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", "таблица стилей")
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 при открытии страницы.
Следующая задача — привязка к тегу <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") //избыточный файл, поэтому файл не добавлен
Здесь я просто грубо проверяю, существует ли уже добавленный файл в списке имен добавленных файлов, хранящихся в переменных filesadded, прежде чем решить, продолжать или нет.
Хорошо, идем дальше, иногда ситуация может потребовать этого. вы фактически удаляете или заменяете добавленный файл .js или .css. Давайте посмотрим, как это делается дальше.