如何确保某个脚本标签保留在 <head> 的顶部

Question

我在一个大型网站上工作，上面已经设置了许多现有的第三方产品。我想添加一个 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>

但是当页面加载完成时，当我使用 Web 开发工具检查 DOM 时，我可以看到我的 cookie 脚本不再是 <head> 中的第一个元素.前面插入了一些其他元素。

    <head>
    <script src="https://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"></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>

我该怎么办？

Answer 1

这些元素是在从您的服务器加载页面之后插入的，这意味着在加载和执行这些脚本时，您的脚本已经运行。

Answer 2

您可以使用类似以下内容以编程方式检测此问题：

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

对于您的操作，您可以使用 alert 警告用户 close/not 保存页面。或者，您可以尝试将想要位于顶部的脚本移回顶部

如何确保某个脚本标签保留在 <head> 的顶部

How to ensure a certain script tag remains at the top of <head>

javascript

pageload