HTTPS导致CSS动画无法加载？非常困惑

Question

我正在实施网站的最后阶段，但是我的JS / CSS动画存在一些问题。在我的中文语法页上，我的某些纸卷上应该有黄色的高光。问题是，当我在网站网址开头添加https时，它没有执行此操作。我不认为这不是代码问题，除非需要剪裁才能使其正常工作。

看看：

http://www.thechinesewriter.com/story2.html VS。 https://www.thechinesewriter.com/story2.html

谁能解释为什么会这样？一些启示会很好。谢谢！

Answer 1

混合内容被浏览器阻止 参见：https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

和 更换 http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 与 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Answer 2

这是因为，您已经在外部向页面中添加了一些javascript，当使用https时，浏览器阻止了外部js的加载，如果单击浏览器URL区域中的加载不安全的脚本，您会看到它正常工作。为了避免这种情况，您必须使用index.html或站点主文件中script标记中的所有脚本。

Answer 3

您正在使用jquery将“活动”类添加到突出显示中。而且由于脚本标记中包含不安全的http链接，因此无法加载您的jquery。

正如您的浏览器控制台明确指出的那样，您的jquery链接被阻止，因为它是http而不是https。主流浏览器会阻止不安全的http资源（在本例中为您的jquery链接）加载到https站点。

您可以使用https链接（即https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js同时用于http和https）来避免此类问题。