HTTPS заставляет CSS-анимацию не загружаться? Очень смущенный

Question

Я нахожусь на последних этапах реализации своего веб-сайта, но у меня возникла небольшая проблема с моей анимацией JS / CSS. На страницах грамматики моего китайского языка должны быть желтые блики над некоторыми из моих заметок на свитке. Проблема в том, что он не делает этого, когда я включаю https в начале URL моего сайта. Я не думаю, что это проблема кода, если только нет фрагмента, который мне нужно будет включить, чтобы он работал.

Посмотрите:

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

Вы добавляете «активный» класс к выделению с помощью jquery. И ваш jquery не загружается из-за небезопасной ссылки http, которую вы включили в тег сценария.

Как ясно говорит консоль браузера, ваша ссылка jquery была заблокирована, поскольку она имеет http, а не https. Основные браузеры блокируют незащищенные http-ресурсы (в данном случае вашу ссылку jquery) для загрузки на сайт https.

Вместо этого вы можете использовать ссылку https, т. Е. https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js для http и https, чтобы избежать такой проблемы.

Answer 3

Это потому, что вы включили некоторый JavaScript на свою страницу извне, при использовании https браузер запрещает загрузку внешних js, если вы нажмете на загрузку небезопасных сценариев в области URL браузера, вы увидите, что он работает правильно. Чтобы избежать этой ситуации, вы должны использовать все сценарии в теге сценария в index.html или главном файле сайта.