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

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

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

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

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

Ответы [ 8 ]

41 голосов
/ 23 апреля 2011

Для динамической загрузки файла .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

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

13 голосов
/ 22 апреля 2011

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

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

4 голосов
/ 23 апреля 2011

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

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

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

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

2 голосов
/ 17 сентября 2014

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

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

<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 вы можете использовать следующие функции:

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

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

1 голос
/ 22 апреля 2011

Чтобы добавить новый файл 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');
0 голосов
/ 11 марта 2017

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
}
0 голосов
/ 21 июля 2014

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

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