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文件，并具有首先加载依赖项和接下来插件的功能。

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

2 个答案: