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

создайте тег скрипта и прикрепите скрипт 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>