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 sn-p 似乎是在加载 select2 之前执行的。

也许您可以使用 ajax 调用动态加载 select2 库，以确保库加载。

$.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() 函数中。这是一个不雅的已知解决方案，但它确实有效。

看到这个帖子：Why is setTimeout(fn, 0) sometimes useful?