Загрузить JavaScript по требованию после отображения lightbox

на каждой странице моего сайта есть кнопка. При нажатии на кнопку, появляется лайтбокс. Содержимое лайтбокса-это форма, которая опирается на несколько файлов JavaScript, включая Angular. Эти файлы JavaScript используются только для формы и нигде больше на сайте.

чтобы сократить время загрузки страницы, моя цель-загрузить файлы JavaScript только после того, как пользователь нажмет кнопку.

есть ли лучший способ сделать это? Некоторые варианты я могу думать из них:

  1. содержимое лайтбокса-это iframe и исходный html документ содержит теги скриптов.
  2. использовать С помощью jQuery.getscript метод (или аналогичный) для загрузки скриптов

есть ли лучший способ?

7 ответов


понимая ваш вопрос, вы хотите лениво загрузить js/css/html . Вы можете достичь этого, используя два плагина

требуют.js

плюсы :

  1. явные зависимости между модулями, перечисленными в коде.
  2. асинхронная загрузка модуля.
  3. ленивая (по требованию) загрузка модуля.
  4. поддержка одной из стандартных оболочек модулей (AMD), много модули сообщества реализуют его, поэтому ваши модули могут зависеть на них.

плюсы :

  1. мы не можем вводить модули AngularJS на лету. Это загружает файлы только при необходимости, т. е. RequireJS загружает только файлы javascript, но не регистрирует новые угловые модули и компоненты в этом новом коде

OcLazyLoad

плюсы :

  1. OcLazyLoad используется для загрузки файлов зависимостей, а также для инъекции модули AngularJS на лету.
  2. Загрузка Js - и CSS-файлы-легко и просто.

плюсы :

  1. мы не можем поддерживать структуру файлов зависимостей.

так что вы можете использовать Require.js загрузить зависимостей между модулями, перечисленными в коде и OcLazyLoad впрыснуть угловой модуль на лету . И за ваш вопрос относительно angular сама на лету, я не думаю, что вы можете сделать это в данном случае.


создайте тег скрипта и прикрепите скрипт src и добавьте его в head с помощью javascript, как показано ниже.

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'test.js');
document.head.appendChild(script);

другой способ-загрузить JS-файл с помощью вызова jQuery ajax, как показано ниже.

$.ajax({
    url: "test.js",
    dataType: "script",
    cache: true,
    success: function() {
        //Execute the function which you want...
    }
});

в зависимости от архитектуры вашего проекта и того, используете ли вы/хотите использовать библиотеку, такую как require.Джей может помочь.

вы можете использовать его для того чтобы требовать в необходимых модулях для лайтбокса.

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

другой идеей может быть вызов функции ajax по щелчку кнопки, которая вернет частичный html, содержащий сценарии lightbox, которые вы затем добавите в документ, чтобы сценарии снова загружались динамически.


вот пример того, как вы достигаете, я реализовал что-то подобное на своих сайтах, а внешние JS загружаются только при необходимости

<script type='text/javascript'>
$(elem).click(function() {
var d= document;
var id = 'ext-js';
if (d.getElementById(id)) return;
var t = d.createElement('script');
t.type = 'text/javascript';
t.src = '//path to external js';
t.id = id;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
});
</script>

код также проверяет, загружен ли скрипт, поэтому он не пытается загружать с каждым щелчком мыши, вы можете легко масштабировать для загрузки нескольких скриптов, просто дайте каждому скрипту другой идентификатор и скопируйте раздел ниже Для столько скриптов, сколько вам нужно.

var t = d.createElement('script');
t.type = 'text/javascript';
t.src = '//path to external js';
t.id = id;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);

надеюсь, это поможет


Вариант 2 (динамически загружаемые скрипты) - хороший способ пойти-вам, вероятно, просто нужно bootstrap angularjs правильно, как только он был загружен. Быстрая демонстрация:

(function() {
  "use strict";

  var angularLoaded = false;

  window.lazyLoadAngular = function() {
    if (angularLoaded) {
      return;
    }

    angularLoaded = true;

    var angularScript = document.createElement("script");
    angularScript.src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js";
    document.body.appendChild(angularScript);
    angularScript.onload = function() {
      var angular = window.angular,
      angularContent = document.querySelector('.angularContent');

      // reveal angular content
      angularContent.style.display = "block";

      // in practice, you're probably dynamically loading your angular app scripts as well... but here we'll just create it once angular is available
      createAngularApp();
      
      // bootstrap angular on the content
      angular.bootstrap(angularContent, ["myApp"]);
    };
  };


  function createAngularApp() {
    var angular = window.angular;
    angular.module("myApp", [])
    .controller("MyCtrl", ["$scope", MyCtrl]);
    
    function MyCtrl($scope) {
      $scope.isAngularWorking = "Yes it is!";
    }
  }

})();
.angularContent {
  display: none;
}
<button onclick="lazyLoadAngular()">Lazy load Angular</button>

<div class="angularContent">
  <div ng-controller="MyCtrl">
    Angular is working: {{isAngularWorking}}
  </div>
</div>

можно использовать SystemJs, универсальный динамический модуль loader-загружает модули ES6, AMD, CommonJS и глобальные скрипты в браузере и NodeJS, Я думаю, очень мощный двигатель.


для динамической загрузки скриптов браузера можно использовать пакет load-script.

  • require ('load-script') возвращает функцию следующего интерфейса: function (url [, opts] [, cb]) {}
  • load-script добавляет узел сценария к <head> элемент в dom.

    пример

      var load = require('load-script')
    
      load('foo.js', function (err, script) {
      if (err) {
                // print useful message 
      }
      else {
            console.log(script.src);// Prints 'foo'.js' 
            // use script 
            // note that in IE8 and below loading error wouldn't be reported 
                }
           })
    

В качестве альтернативы вы можете объединить элементы с Дом!--4-->

пример

 <script type="application/javascript">
   function loadJS(file) {
     // DOM: Create the script element
     var jsElement = document.createElement("script");
     // set the type attribute
     jsElement.type = "application/javascript";
     // make the script element load file
     jsElement.src = file;
     // finally insert the element to the body element in order to load the script
     document.body.appendChild(jsElement);
   }
 </script>

   <button onclick="loadJS('jsFile1.js');">Load jsFile1.js</button>
   <button onclick="loadJS('jsFile2.js');">Load jsFile2.js</button>