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加载之前执行的。

也许可以通过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?

iframe中的函数在加载js库之前执行

1 个答案: