Способы динамического добавления файлов javascript на странице

Ответ 1

Чтобы загрузить файл .js или .css динамически, в двух словах, это означает использование методов DOM, чтобы сначала создать великолепный новый элемент "SCRIPT" или "LINK", присвоить ему соответствующие атрибуты и, наконец, использовать element.appendChild(), чтобы добавить элемент в нужное место в дереве документов. Это звучит намного больше, чем на самом деле. Давайте посмотрим, как все это происходит:

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

Я надеюсь, что его использование будет полным

Ответ 2

Вы можете использовать функцию jQuery.getScript()... Я думаю, вам будет намного проще, если вы включите файл JavaScript .js.

Здесь является ссылкой.

Ответ 3

существует много разных способов, но способ загрузки дополнительных скриптов Google выглядит следующим образом:

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

Это берется непосредственно из загрузчика карт Google.

Написание тега script непосредственно в документе является самым простым и эффективным способом.

Ответ 4

Чтобы добавить новый файл javascript динамически:

function includeJS(jsFile) {
    $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile));
}


// Pick a JS to load
if ($.browser.msie) {
    includeJS('first.js');
} else {
    includeJS('second.js');
}
includeJS('third.js');

Ответ 5

Я видел, что делает этот загрузчик. Он делает то, что он проходит через все теги script в документе, чтобы найти тот, который загружал себя, например:

<script src="/path/to/single.js?files=first.js,second.js,third.js"></script>

Затем он анализирует запрос, используемый внутри атрибута src, и динамически создает дополнительные теги script для каждого файла script. В то же время он также анализирует путь базы script (/path/to/single.js) и использует тот же путь для загрузки файлов зависимостей (например, /path/to/first.js).

Вы можете создать свой собственный загрузчик script, как это. В ванильном javascript вы можете использовать следующие функции:

• getElementsByTagName - найти все сценарии
• getAttribute - найти атрибут src/href/type
• createElement - создать элемент script
• appendChild - добавить в голову/тело

Anand Thangappan опубликовал решение, которое использует эти функции. Если вы используете фреймворк, такой как jQuery или MooTools, то оба предоставляют свои собственные реализации динамической загрузки JsvaScript.

Наконец, для вашей проблемы существует серверное решение. Посмотрите minify - Объединяет и минимизирует несколько файлов CSS или JavaScript в одну загрузку.

Ответ 6

Мы можем быстро расширить это, чтобы обратный вызов можно было выполнить после добавления script.

function loadjscssfile(filename, filetype, callback){
    if (typeof fileref!="undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
        callback();
    }
}

Ответ 7

Следуя советам комментариев Salaman A, я нашел, как Google делает это сейчас с Analytics: https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

И вот более общая версия того же кода:

(function() {
    var s = document.createElement('script'); // Create a script element
    s.type = "text/javascript";               // optional in html5
    s.async = true;                           // asynchronous? true/false
    s.src = "//example.com/your_script.js"; 
    var fs = document.getElementsByTagName('script')[0];  // Get the first script
    fs.parentNode.insertBefore(s, fs);
})();

Ответ 8

document.getElementsByTagName("head")[0].appendChild(fileref‌​) не работает, если у вас есть document.ready() работает inline. $("head").append(fileref); отлично работает для меня, хотя для него требуется jquery.min.js встроенная ссылка.

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

и master_load.js:

function loadjscssfile(filename) {
    if (filename.substr(filename.length - 4) == ".css") { // 'endsWith' is not IE supported.
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("href", filename)
        //fileref.setAttribute("type", "text/css")
    }
    else if (filename.substr(filename.length - 3) == ".js") {
        var fileref = document.createElement('script')
        fileref.setAttribute("src", filename)
        //fileref.setAttribute("type", "text/javascript")
    }
    $("head").append(fileref);
}
function load_master_css() {
    loadjscssfile("css/bootstrap.min.css");
    // bunch of css files
}
function load_master_js() {
    loadjscssfile("script/bootstrap.min.js");
    // bunch of js files
}