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

Question

Я видел файл Scriptaculous.js, который динамически включал необходимые ему файлы javascript.Есть ли лучший подход для динамического включения javascript.

Например, я хотел бы включить мои js-файлы, например,

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

Как я могу сделать это эффективно?

Answer 1

Для динамической загрузки файла .js или .css, в двух словах, это означает, что с помощью методов DOM сначала нужно создать шикарный новый элемент «SCRIPT» или «LINK», назначить ему соответствующие атрибуты и, наконец, использовать элемент.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

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

Answer 2

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

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

Answer 3

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

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

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

Запись тега сценария непосредственно в документ - самый простой и эффективный способ.

Answer 4

Следуя совету в комментариях Саламана А , я обнаружил, как 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);
})();

Answer 5

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

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

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

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

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

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

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

Answer 6

Чтобы добавить новый файл 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');

Answer 7

document.getElementsByTagName("head")[0].appendChild(fileref‌​) не работает, если у вас есть какой-то document.ready (), работающий внутри. $("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
}

Answer 8

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

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