Загружать JavaScript динамически

У меня есть веб-страница и холст с встроенными в него Картами Google. Я использую jQuery на этом сайте.

Я хочу загрузить API Карт Google только в том случае, если пользователь нажимает кнопку "Показать карту". Кроме того, я хочу убрать всю загрузку Карт Google из заголовка, чтобы улучшить производительность страницы.

Мне нужно загружать JavaScript динамически. Какую функцию JavaScript я могу использовать?

Ответы

Ответ 1

Возможно, вы захотите использовать jQuery.getScript, который поможет вам загрузить javascript файл API Карт Google, если это необходимо.

Пример:

$.getScript('http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true', function(data, textStatus){
   console.log(textStatus, data);
   // do whatever you want
});

Ответ 2

Используйте стратегию загрузки Загрузка по запросу

Загрузка по запросу

Предыдущий шаблон загружал дополнительный JavaScript безоговорочно после загрузки страницы, предполагая что код, вероятно, понадобится. Но можем ли мы сделать лучше и загружать только части код и только те части, которые действительно нужны? Представьте, что у вас есть боковая панель на странице с разными вкладками. При нажатии на вкладку XHR-запрос на получение контента, обновление содержимого вкладки и анимирование затухания обновления цвет. И что, если это единственное место на странице, где вам нужен ваш XHR и анимация? библиотеки, и что, если пользователь никогда не нажимает на вкладку?Введите шаблон нагрузки по запросу. Вы можете создать функцию (или функцию) require() берет имя файла script для загрузки и выполняет функцию обратного вызова, когда загружается дополнительный script.

Функция require() может быть использована следующим образом:

require("extra.js", function () {
   functionDefinedInExtraJS();
});

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

function require(file, callback) {
   var script = document.getElementsByTagName('script')[0],
   newjs = document.createElement('script');

  // IE
  newjs.onreadystatechange = function () {
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
        newjs.onreadystatechange = null;
        callback();
     }
  };
  // others
  newjs.onload = function () {
     callback();
  }; 
  newjs.src = file;
  script.parentNode.insertBefore(newjs, script);
}

Ответ 3

вы просто сгенерировали тег script через javascript и добавили его в документ.

function AddScriptTag(src) {
    var node = document.getElementsByTagName("head")[0] || document.body;
    if(node){
        var script = document.createElement("script");
        script.type="text/javascript";
        script.src=src
        node.appendChild(script);
    } else {
        document.write("<script src='"+src+"' type='text/javascript'></script>");
    }
}

Ответ 4

Я думаю, что вы идете для этого http://unixpapa.com/js/dyna.html

<input type="button" onclick="helper()" value="Helper">

   <script language="JavaScript">
   function helper()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'your_script_url';
      head.appendChild(script);
   }
   </script>

Ответ 5

Я использовал ответ Tangim, но после того, как обнаружил, что проще использовать функцию jquery html(). Когда мы делаем запрос ajax в html файл с html + javascript, мы делаем следующее:

$.ajax({
    url:'file.html',
    success:function(data){
       $("#id_div").html(data); //Here automatically load script if html contain
    }
});