嵌入第三方网站的JS脚本Safari运行正常Chrome无响应问题咨询

问题修复方案 #

1. 解决DOM加载时序问题 #

Chrome的脚本执行和DOM渲染时序和Safari存在差异，如果你的JS代码在<input id="reg_email">元素渲染完成前就执行，document.getElementById('reg_email')会返回null，后续的事件绑定逻辑会直接失效，这是最可能导致脚本完全不运行、alert不触发的原因。
修复方式：将所有JS逻辑包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
  // 你的现有全部JS代码放在此处
})

2. 修复语法错误 #

你贴出的代码中逻辑与运算符被错误转义为&&，如果实际运行的JS代码中保留了这个写法，Chrome会直接抛出语法错误终止脚本执行，需要把所有&&替换为原生JS的&&。
另外doneTyping方法中xhttp.send(params)调用时，params变量未声明赋值，会触发运行时错误，需要补全参数拼接逻辑，示例：

function doneTyping(myInputValue, id) {
  // 补全params定义
  var params = `email=${encodeURIComponent(myInputValue)}&id=${id}&token=${encodeURIComponent(TOKEN)}`;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(xhttp.responseText);
      console.log('send params');
    }
  };
  xhttp.open("POST", "你的实际接口地址", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(params);
}

3. 修复逻辑判断错误 #

现有TOKEN校验逻辑(TOKEN !== '' || TOKEN !== null)存在逻辑漏洞，无论TOKEN是空字符串还是null，该判断都会返回true，不符合“TOKEN非空且不为null”的校验需求，修改为：

if (TOKEN !== '' && TOKEN !== null && isValid === true)

4. 替换兼容的事件绑定方式 #

部分Chrome版本对直接赋值onfocusout的事件绑定方式支持存在问题，建议改用标准事件监听写法：

reg_emailInputId.addEventListener('blur', function() {
  var isValid = validateEmail(reg_emailInputId.value);
  if (TOKEN !== '' && TOKEN !== null && isValid === true) {
    doneTyping(reg_emailInputId.value, '107');
  }
  console.log('listener_on');
})

验证方法 #

修复后打开Chrome控制台，勾选「Preserve log」选项，输入符合格式的邮箱后点击页面其他位置触发失焦事件，查看控制台日志和网络请求栏的提交记录即可确认是否生效。

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