问appendChild澄清
EN

Stack Overflow用户

提问于 2021-06-13 06:13:32

回答 1查看 576关注 0票数 1

我加了一个饼干同意书。需要在任何其他脚本之前加载https://cdn.cookielaw.org/consent/c4337328/OtAutoBlock.js。我现在想知道appendChild是否是正确的选择。它是将OtAutoBlock加载到我所写的位置，还是将脚本附加到标记的末尾(这太晚了)。它必须是加载的第一个脚本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- OneTrust Cookies Consent Notice -->
    <script type="text/javascript">
      if ("%REACT_APP_COOKIE_BAR%" === "true") {
        var otAutoBlock = document.createElement("script");
        otAutoBlock.setAttribute("type", "text/javascript");
        otAutoBlock.setAttribute("src", "https://cdn.cookielaw.org/consent/c4337328/OtAutoBlock.js");
        
        var otSDKStub = document.createElement("script");
        otSDKStub.setAttribute("type", "text/javascript");
        otSDKStub.setAttribute("src", "https://cdn.cookielaw.org/scripttemplates/otSDKStub.js");
        otSDKStub.setAttribute("charset", "UTF-8");
        otSDKStub.setAttribute("data-domain-script", "c4337328");

        document.getElementsByTagName("head")[0].appendChild(otAutoBlock);
        document.getElementsByTagName("head")[0].appendChild(otSDKStub);

        function OptanonWrapper() { }
      }
    </script>

    <script type="text/javascript">
      /* [Should load after OtAutoBlock loads to avoid tracking before consent was given] */
    </script>

  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-14 17:18:43

document.head.appendChild(script)将将其添加到<head>标记的末尾，因此它将在所有其他脚本之后加载。你可以做两件事：

--在结束时用appendChild加载它，并让所有其他脚本都具有defer属性，如下所示：<script defer> /* something */ </script> defer强制在加载页面后执行脚本，但是如果加载没有defer的OtAutoBlock，它将在其他脚本之前运行。唯一要注意的是，defer将导致脚本不运行到最后，而是在整个页面加载之后运行，其中包括CSS样式表、其他JavaScripts、图标、图像、<script>内容、<script>标记中的XHR请求等等。

<script>
const load = true; // your stuff here

if (load)
{
  const script = document.createElement('script');
  
  window.hasRunned = false;
  script.text = 'alert(\'OtAutoBlock running.\'); window.hasRunned = true;';
  
  document.head.appendChild(script);
}
</script>

<script defer>
alert('Another script. Has runned OtAutoBlock: ' + window.hasRunned);
</script>

<script defer>
alert('And yet another. Has runned OtAutoBlock: ' + window.hasRunned);
</script>

--您使用insertBefore在其他脚本之前添加它，因此它将在它们之前运行。不需要在这种方法中使用defer。如果需要在加载页面之前运行脚本，这可能就是您想要的。

<script>
const load = true; // your stuff here

if (load)
{
  let script = document.createElement('script');
  
  window.hasRunned = false;
  script.text = 'alert(\'OtAutoBlock running.\'); window.hasRunned = true;';
  
  document.head.insertBefore(script, document.head.children[0]);
}
</script>

<script>
alert('Another script. Has runned OtAutoBlock: ' + window.hasRunned);
</script>

<script>
alert('And yet another. Has runned OtAutoBlock: ' + window.hasRunned);
</script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67955408

复制

相似问题

问appendChild澄清
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问appendChild澄清EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问appendChild澄清
EN