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

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标头签名：

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。

Answer 2

按照这个顺序给出脚本标签

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

这使得浏览器首先加载jquery，然后加载插件。您可以尝试使用requirejs库。它可以异步加载js文件，并具有先加载依赖项，然后加载插件的功能。