javascript - 确保第二个脚本仅在第一个脚本之后加载

Question

Jquery 在自定义插件 (elevateZoom) 之后加载。导致elevateZoom失败。

有解决办法吗？

请注意:根据政策，我只能更改正文。

<script type="text/javascript" src="/sites/default/files/jquery.elevateZoom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("#zoom_01").elevateZoom(); 
  }); 
</script>

<p>
  <img id="zoom_01" alt="" data-entity-type="" data-entity-uuid=""
       data-zoom-image="/sites/default/files/2017-06/Ipad-with-loupe.png"
       src="/sites/default/files/2017-06/Ipad-with-loupe-small.png" />
</p>

控制台中的错误消息如下:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline'

实时链接 - https://www.workbooks.com/test-jquery-zoom

Answer 1

您的网站有一个内容安全策略，会阻止您从 CDN 加载 jQuery。

您链接的实时网站具有以下 Content-Security-Policy header 签名:

Content-Security-Policy:script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.youtube.com/ https://maps.googleapis.com ; object-src 'self'

您需要将 ajax.googleapis.com 域添加到该策略中，或者在已列入白名单的网站之一中托管 jQuery。