This是我使用 Jekyll 使用 GitHub 页面在 GitHub 上发布的示例网站。您在网站中看到的 map 应该对所有州都是交互式的，如 fiddle 所示。 ，它显示了 map 应该如何工作。
这里使用的主要 Javascript 文件是 jquery.imagemapster.js
HEAD我的代码是:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
或者您可以简单地查看我的 code存在于 repository用于发布网站。
我尝试过的事情:
- 将所有图像和脚本放入名为
asset的文件夹中，并链接到资源。那根本不起作用。没有显示图像。 - 将资源放入根文件夹中。这就是我所做的。图像显示正常，但脚本仍然无法运行。
- 为了检查链接，我将 4k 行代码复制到
<script>中标签对，位于头部内。那效果不太好。
最终，使用 Jekyll 的本地站点构建工作完美。我在这里做错了什么？
最佳答案
jquery.imagemapster.js 加载正常，问题在于您加载库的方式:
Mixed Content: The page at 'https://mooncrater31.github.io/infer/#' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
这会阻止您的网站在现代流行的浏览器(又名:Chrome)中使用 JQuery，这就是它在本地运行良好的原因，它无需 https 即可运行。
要解决这个问题，只需使用 HTTPS 加载它们即可:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
关于javascript - Jekyll 未加载图像的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52405374/