Функции внутри iframe выполняются до загрузки библиотек js

Question

У меня есть iframe, который содержит следующее:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_container"></div>
<script>
  $.ajax({
    type: 'post',
    dataType: 'json',
    contentType: 'application/json',
    url: 'some_url',
    success: function(data, status, xhr) {
      console.log(data.html); // <div><link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css' rel='stylesheet'><script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js'></script><script>  $('.input-select2').select2();</script><select class='input-select2'></select></div>
      $('#my_container').html(data.html);
    },
  });
</script>

Как вы видите, скрипт внутри iframe извлекает строку HTML / js из внешнего ресурса и добавляет ее к #my_container. Вытащенный HTML / JS:

<div>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css' rel='stylesheet'>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js'></script>
  <script>
    $('.input-select2').select2();
  </script>
  <select class='input-select2'></select>
</div>

Но когда запускаются добавленные сценарии, я получаю следующую ошибку:

Uncaught TypeError: $(...).select2 is not a function

Так что, очевидно, функция select2 выполняется до загрузки библиотеки. Если я переместу библиотеку select2.min.js на один уровень выше библиотеки jquery.min.js, все будет работать отлично. Или, если я оберну свою select2 функцию в setTimeout(function(){ ... }, 20);, она тоже будет работать.

Так что я могу сделать?

Answer 1

Если я понял, кажется, что ваш фрагмент jquery выполняется до загрузки select2.

Может быть, вы можете динамически загрузить библиотеку select2 с помощью ajax-вызова, чтобы обеспечить загрузку библиотеки.

$.ajax({
  url: "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js",
  dataType: "script",
  success: function(){
    $('.input-select2').select2();
  }
});

Как вы говорите, вы также можете обернуть инициализацию select2 в функцию setTimeout (). Это нелегкое известное решение, но оно работает.

Смотрите этот пост: Почему setTimeout (fn, 0) иногда полезен?