Блог

Главная - Вопросы по программированию - Как убедиться, что определенный тег скрипта остается в верхней части

Как убедиться, что определенный тег скрипта остается в верхней части

#javascript #pageload

#javascript #загрузка страницы

Вопрос:

Я работаю над большим веб-сайтом, на котором уже установлено множество существующих сторонних продуктов. Я хочу добавить сценарий согласия на использование файлов cookie, который должен быть выполнен первым скриптом. Итак, я добавил его в начало <head> , и когда я просматриваю исходный код, я вижу, что он находится вверху.

 <head>
  <script src="https://path/to/cookie/consent/stuff/cookie_script.js"> 
  ...

А затем далее загружаются различные другие внешние библиотеки и фреймворки: jQuery, GoogleAds, Hotjar и так далее

     ...
          <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
          <script type="text/javascript" async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
       ...
</head>

Но к тому времени, когда страница завершит загрузку, когда я проверяю DOM с помощью инструментов веб-разработки, я вижу, что мой скрипт cookie больше не является первым элементом в <head> . Перед ним были вставлены некоторые другие элементы.

     <head>
    <script src="https://www.googletagservices.com/activeview/js/current/osd.js?cb=/r20100101"></script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://securepubads.g.doubleclick.net/pagead/js/rum.js"></script>
    ...
    // Cookie consent script has been pushed down to here
      <script src="https://path/to/cookie/consent/stuff/cookie_script.js">
    ...
    </head>

Что я могу с этим поделать?

Комментарии:

1. Если ваш скрипт является первым в исходном коде, независимо от динамически добавляемых скриптов, он будет обработан раньше других. На этом этапе порядок не имеет значения, потому что браузеры проанализируют страницу, полностью обработают ваш файл скрипта, прежде чем переходить к обработке дальнейших скриптов, которые будут вставлять динамические другие скрипты.

Ответ №1:

Эти элементы вставляются ПОСЛЕ загрузки страницы с вашего сервера, это означает, что к моменту загрузки и выполнения этих скриптов ваш скрипт уже запущен.

Ответ №2:

Вы можете обнаружить это программно, используя что-то вроде:

 setTimeout(function() {
  var topScript = document.querySelector("script");
  if (topScript.getAttribute(src) != ...) {
     //takeAction
  } 
}, yourTimeout);

Для вашего действия вы можете использовать alert , чтобы предупредить пользователя о закрытии / не сохранении страницы. В качестве альтернативы, вы можете попробовать переместить скрипт, который вы хотите разместить наверху, обратно наверх