Невозможно связать значок после изменения файла JavaScript

В моем локальном каталоге все работает. У меня есть файл JavaScript, который создает значок и ссылки style.css. В теге скрипта ничего не работает. Здесь можно найти необработанный код, и ни один из них не работает:

Я использовал 3-й, но как только я внес изменения в script.js, все сломалось! По сути, в моем script.js я привязываю к значку, относящемуся к репозиторию, и относительно связываю файл style.css, используя createElement и атрибуцию, и добавляю его в заголовок.

const link = top.document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "./icon.ico";
top.document.querySelector("head").appendChild(link);

const stylesheetLink = top.document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "./style.css";
top.document.querySelector("head").appendChild(link);

console.info("The style was linked and the favicon was added.");

Все работало нормально, пока я не добавил второй раздел - связывание style.css - и, поскольку они были подключены через ветку (не рекомендуется), значки исчезли.

Почему это происходит и как это исправить? Ссылки веток не работали, потому что они кешируются постоянно, но как насчет ссылок на хеш-код фиксации?

19.09.2018

Теперь я использую вторую ссылку с CDN и фиксацией, но приведенный выше код по-прежнему не работает. У меня есть две другие функции, goToHomePage() и goBack(), которые работают нормально. Все работает локально, в Sublime Text 3, когда я запускаю его в эквивалентном HTML-файле. Появляются значки. Почему он работает локально, а не на страницах GitHub?

20.09.2018

Я добавил отладочную инструкцию console.info(), в которой говорится

The style was linked and the favicon was added.

После обновления фиксации для одного из моих репозиториев и нажатия она распечаталась! Итак, факты таковы

  • Другие функции работают
  • Появление инструкции Console.log
  • До внесения изменений в script.js все работало нормально.
  • После внесения изменений в script.js исчезли значки, которые были связаны через script.js.
  • Добавление его вручную путем проверки элемента на веб-странице и добавления значка работает

Я предполагаю, что проблема в

  • Не в исходном коде файла, потому что функция журнала работала
  • При создании элемента ссылки - я продолжал переключаться между top.document и document, но через консоль обнаружил, что они точно такие же.

Сообщалось о каких-либо ошибках в вашем JavaScript и / или сетевых консолях?

Phil 20.09.2018 03:43

Нет, ошибок нет. Раньше он говорил 404, но это было потому, что не во всех моих репозиториях был файл, на который я ссылался через script.js

Marvin 20.09.2018 03:47

Не могли бы вы объяснить, что на самом деле означает "все сломалось"? Как это "не работает"?

Phil 20.09.2018 03:48

Отредактировал мой пост с MCVE и дополнительной информацией @Phil

Marvin 20.09.2018 03:52

Вы можете обнаружить, что это проблема с кешем. Фавиконы агрессивно кешируются вашим браузером

Phil 20.09.2018 03:54

До того, как я внес изменения, значок работал нормально.

Marvin 20.09.2018 03:56

Позвольте нам продолжить обсуждение в чате.

Marvin 20.09.2018 04:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
7
104
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во втором разделе - связывание таблицы стилей, переменная link добавляется снова, тогда как должна быть добавлена ​​переменная stylesheetLink. В последней строке MCVE замените .appendChild(link) на .appendChild(stylesheetLink).

Кроме того, вы можете просто сделать cdn.rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/master/script.js. Ветка работает, пока вы используете CDN.

Другие вопросы по теме