如何修改onload函数，使脚本在指定ID按钮加载后立即执行？

原代码依赖window.onload事件，会等待页面所有资源（图片、样式表等）加载完成后才执行，导致按钮的URL更新存在明显延迟。下面提供几种更高效的实现方式，确保按钮加载后立刻处理：

方案1：使用DOMContentLoaded事件 #

DOMContentLoaded会在DOM树构建完成后立即触发，无需等待图片、字体等外部资源加载，执行时机比window.onload早得多，适合静态渲染的按钮场景。

document.addEventListener('DOMContentLoaded', function() {
  const signInBtn = document.getElementById("sign-in-btn");
  if (signInBtn) appendUtmsToButton(signInBtn);

  const signUpBtn = document.getElementById("sign-up-btn");
  if (signUpBtn) appendUtmsToButton(signUpBtn);
});

function appendUtmsToButton(button) {
  const pageSearch = window.location.search;
  const urlParams = new URLSearchParams(pageSearch);

  const buttonUrl = new URL(button.href);
  let newButtonParams = new URLSearchParams(buttonUrl.search);

  urlParams.forEach(function(value, key) {
    newButtonParams.append(key, value);
  });

  buttonUrl.search = newButtonParams.toString();
  button.href = buttonUrl.toString();

  // console.log(button.href); // 调试用
};

方案2：将脚本直接放在按钮元素之后 #

如果按钮是静态写在HTML中的（非动态生成），把脚本放在按钮代码的后面，DOM解析到此处时按钮已经存在，会立即执行脚本，这是性能最优的方式。

<!-- 页面中的按钮 -->
<a id="sign-in-btn" href="/sign-in">登录</a>
<a id="sign-up-btn" href="/sign-up">注册</a>

<!-- 脚本紧跟按钮之后 -->
<script type="text/javascript">
  const signInBtn = document.getElementById("sign-in-btn");
  appendUtmsToButton(signInBtn);

  const signUpBtn = document.getElementById("sign-up-btn");
  appendUtmsToButton(signUpBtn);

  function appendUtmsToButton(button) {
    const pageSearch = window.location.search;
    const urlParams = new URLSearchParams(pageSearch);

    const buttonUrl = new URL(button.href);
    let newButtonParams = new URLSearchParams(buttonUrl.search);

    urlParams.forEach(function(value, key) {
      newButtonParams.append(key, value);
    });

    buttonUrl.search = newButtonParams.toString();
    button.href = buttonUrl.toString();

    // console.log(button.href); // 调试用
  };
</script>

方案3：使用MutationObserver监听动态加载的按钮 #

如果按钮是通过JS异步生成并插入DOM的，用MutationObserver监听DOM变化，一旦目标按钮出现就立即处理，避免遗漏动态元素。

// 目标按钮ID列表
const targetButtonIds = ['sign-in-btn', 'sign-up-btn'];
// 记录已处理的按钮，避免重复操作
const processedButtons = new Set();

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.addedNodes.forEach(function(node) {
      // 检查当前节点是否是目标按钮
      if (node.nodeType === 1 && targetButtonIds.includes(node.id)) {
        handleButton(node);
      }
      // 检查节点的子元素中是否存在目标按钮
      const childButtons = node.querySelectorAll('#sign-in-btn, #sign-up-btn');
      childButtons.forEach(handleButton);
    });
  });
});

// 处理按钮的逻辑
function handleButton(btn) {
  if (!processedButtons.has(btn.id)) {
    appendUtmsToButton(btn);
    processedButtons.add(btn.id);
    // 所有按钮都处理完成后，停止监听以节省性能
    if (processedButtons.size === targetButtonIds.length) {
      observer.disconnect();
    }
  }
}

// 配置监听选项：监听子元素变化，包括所有子树
const config = { childList: true, subtree: true };
// 开始监听页面主体
observer.observe(document.body, config);

function appendUtmsToButton(button) {
  const pageSearch = window.location.search;
  const urlParams = new URLSearchParams(pageSearch);

  const buttonUrl = new URL(button.href);
  let newButtonParams = new URLSearchParams(buttonUrl.search);

  urlParams.forEach(function(value, key) {
    newButtonParams.append(key, value);
  });

  buttonUrl.search = newButtonParams.toString();
  button.href = buttonUrl.toString();

  // console.log(button.href); // 调试用
};

内容的提问来源于stack exchange，提问作者Anshkid