window.location跳转代码在JSFiddle正常但站点无效果如何解决

• DOM未完成加载就执行JS导致绑定失效
  JSFiddle默认会将脚本放在DOM加载完成后执行，而如果你的站点将这段JS放在<head>标签内，或者放在goBtn、shirts对应的DOM元素之前，document.getElementById会获取不到对应元素，导致点击事件绑定失败。
  解决方法：将JS代码移到页面</body>标签之前，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 把你现有的所有JS代码放在这里
  function populateSecondTextBox() {
    var p = document.getElementById('your_name');
    var txt = document.getElementById('txtFirst');
    p.textContent = txt.value;
  }

  function populateNumberTextBox() {
    var p = document.getElementById('your_number');
    var txt = document.getElementById('txtSecond');
    p.textContent = txt.value;
  }

  var goBtn = document.getElementById("goBtn");
  var shirts = document.getElementById("shirts");

  goBtn.onclick = function() {
    window.location = shirts.value;
  }
})

• 表单默认提交行为覆盖跳转逻辑
  如果你的goBtn是放在<form>标签内的提交类型按钮（默认<button>不带type属性时就是submit类型），点击按钮会先触发表单默认提交刷新页面，跳转逻辑就不会生效。
  解决方法二选一：

1. 给按钮标签添加属性 type="button" 明确指定为普通按钮
2. 在点击事件中阻止默认行为：

goBtn.onclick = function(e) {
  e.preventDefault();
  window.location.href = shirts.value; // 推荐用更标准的window.location.href代替window.location赋值
}

• 下拉框value值不合法
  检查shirts下拉框每个<option>的value属性是否为合法的跳转地址，有没有遗漏、空格、特殊字符未转义的问题，可以在跳转前加日志验证取值：

goBtn.onclick = function() {
  console.log('待跳转地址：', shirts.value); // 打开F12控制台查看取值是否符合预期
  window.location.href = shirts.value;
}

• 浏览器拦截限制
  如果控制台没有报错但跳转不生效，可以检查是否是浏览器扩展（如广告拦截、隐私防护类扩展）拦截了跳转，或者站点是HTTPS协议但跳转地址是HTTP协议触发了混合内容安全限制，这类情况控制台会输出对应报错提示。

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