Блог

Главная - Вопросы по программированию - как динамически загружать javascript

как динамически загружать javascript

#javascript

#javascript

Вопрос:

Я пытаюсь динамически загружать некоторые js-файлы, например:

 function openInforWindow(){
  //check if the InforWinow.js has been loaded or not
  if(window.InforWindow){
    //do the right thing
  }
  else {
    loadJs('xxxxxx/InforWindow.js');
    // do the right thing
    //but here ,the infowindow is not definded yet.
  }
}

function loadJs(filename){
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
  if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

Как убедиться, что переменные или функции в динамически загружаемом js могут быть добавлены в среду выполнения javascript, чтобы я мог их использовать?

Комментарии:

1. где вы используете параметр «filename»? «js» должно быть именем файла, я думаю. в строке fileref.setAttribute(«src»,filename);

2. Вы все равно ошиблись, т. Е. Он все еще находится внутри двойных кавычек, что делает его строкой, а не переменной.

Ответ №1:

добавление элемента script не является блокирующей операцией, это означает, что ваш метод loadJs возвращается немедленно, когда ваш внешний скрипт даже не загружен (и не интерпретирован). Вы должны дождаться его загрузки.

 function openInforWindow(){
  //check if the InforWinow.js has been loaded or not
  if(window.InforWindow){
    //do the right thing
  }
  else {
    var loadHandler = function() {
       //do stuff with inforWindow 
    };

    loadJs('xxxxxx/InforWindow.js', loadHandler);

  }
}

function loadJs(filename, handler){
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "js");
  fileref.onreadystatechange = function () {
    if (this.readyState == 'complete')handler();
  };
  fileref.onload = handler;
  if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

Ответ №2:

Одним из подходов может быть загрузка скрипта с помощью AJAX-загрузчика jQuery. Пример ниже:

 function loadJs(filename, functionToCall){
   $.getScript(filename, functionToCall);
}

Теперь вам просто нужно вызвать loadJs("script.js", callback); , и он сначала полностью загрузится script.js , а затем запустите обратный вызов().

Комментарии:

1. Конечно, вам действительно не нужна оболочка loadJs в этом примере. Эквивалентная функциональность будет достигнута только с помощью функции $.getScript() .

Ответ №3:

Вы можете динамически вставлять <script/> тег в свой документ, вот скрипт, который будет работать в firefox / chrome, вам может потребоваться небольшая настройка в IE:

 loadJs = function(src) {
  var script = document.createElement('SCRIPT');
  script.setAttribute('src', src);
  document.getElementsByTagName('HEAD')[0].appendChild(script);
}

Затем дождитесь запуска document.onload события, ваше window.InforWindow должно быть загружено на этом этапе.

 document.addEventListener('load', function () {
   // Your logic that uses window.InforWindow goes here
}, false);

Обратите внимание, что IE загружает прослушиватель событий немного по-другому:

 document.attachEvent('onload', function() {
   // Your logic that uses window.InforWindow goes here
});
Метки: