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