Question

This是我的示例网站，使用Jekyll在GitHub页面上使用GitHub页面发布。您在站点中看到的地图应该在所有状态下都是交互式的，如本fiddle所示，该地图显示了该地图应该如何工作。

此处使用的主要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的站点的本地建筑物运行正常。我在这里做什么错了？

Answer 1

jquery.imagemapster.js加载良好，问题出在加载库的方式上：

混合内容：“ https://mooncrater31.github.io/infer/#”页面已通过HTTPS加载，但请求了不安全的脚本 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'。该请求已被阻止；内容必须通过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">

Jekyll未为图像加载Javascript

1 个答案: