Cookie 脚本仅运行一次

Question

我在页脚“cookie策略”中添加链接，但是脚本仅在启动弹出窗口后执行和运行，每次单击链接时我都需要启动弹出窗口。

<div>className="action-label" onClick={() => onCookiePolicyHandler()}>Cookie Policy</div>


onCookiePolicyHandler() {
  const script = document.createElement('script');
  script.setAttribute(src, xxxx);
  -----Adding Mutilple attributes-----
  document.head.appendChild(script);
}

上述函数仅在启动弹出窗口时执行一次，当我多次单击脚本时，脚本不会显示任何弹出窗口。你能帮我解决这个问题吗？

Answer 1

function onCookiePolicyHandler() {
  const existingScript = document.querySelector("script[src='xxxx']");
  if (existingScript) {
    existingScript.remove();
  }

  const script = document.createElement('script');
  script.src = 'xxxx'; 
  script.setAttribute('async', 'true');
  script.setAttribute('defer', 'true');
  document.head.appendChild(script);
}

这里的问题是，向 DOM 添加 a 只会执行一次。为了使其在每次单击时执行，您需要在加载脚本后从 DOM 中删除脚本，并在再次单击时重新添加它。

• 在脚本中添加onload事件监听器，以便在执行后将其删除。

• 确保函数每次调用时都会创建并附加一个新脚本。

• 添加 async 和 defer 属性将允许脚本高效加载和执行