如何仅当URL中存在utm_campaign参数时执行指定JS脚本？

要达成这个需求，核心是先判断URL中是否存在utm_campaign参数，只有参数存在时才触发表单填充逻辑。以下是修改后的完整代码及说明：

修改后的代码 #

function fillFormArea(){
  const select = document.getElementById('property.cust_AreaOfInterest.value'); 
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const country = urlParams.get('utm_campaign');

  // 双重校验：确认参数有值再执行赋值操作
  if (country) {
    select.value = country;
  }
}

// 先检查URL中是否存在目标参数
const urlParams = new URLSearchParams(window.location.search);
const hasUtmCampaign = urlParams.has('utm_campaign');

// 仅当参数存在时，才处理DOM加载并执行填充逻辑
if (hasUtmCampaign) {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fillFormArea);
  } else {
    fillFormArea();
  }
}

关键改动说明 #

• 提前参数校验：先通过urlParams.has('utm_campaign')判断参数是否存在，只有存在时才启动后续的DOM监听或函数执行流程，避免无意义的代码运行
• 函数内双重保险：在填充表单的函数内部再加一层参数值校验，防止意外情况下空值覆盖表单原有内容
• 逻辑触发条件限制：原代码会无条件执行填充操作，现在仅在目标参数存在时才触发整个表单填充流程

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