使用JavaScript为第三方站点弹窗内id为idName的文本框赋值失败排查

• DOM上下文选择错误
  你代码中使用的document.getElementById("idName")指向的是触发函数的当前父页面文档，并不是你新开的popup窗口对应的页面文档。你需要把取值路径修改为popup.document.getElementById("idName")才能正确定位到第三方页面的元素。
• 同源策略拦截限制
  由于你操作的是非本人所有的第三方站点，当你的当前页面域名、协议、端口和目标站点三者任意一项不匹配时，浏览器的同源安全策略会直接禁止你跨域操作popup窗口的DOM内容，这种场景下普通前端JS无法直接修改对方站点的元素值，需要目标站点配合开启跨域权限或通过postMessage协议通信才能实现。
• 赋值后页面被强制重置
  你在给文本框赋值完成后立刻调用了popup.location.reload()，这行代码会触发popup页面重新加载，你刚修改的DOM内容会被完全重置为页面初始状态，填入的值自然会消失，需要删除这行多余的重载代码。
• onload事件绑定时机隐患
  如果目标站点加载速度较快，可能会出现在你绑定popup.onload回调之前，popup页面就已经完成加载的情况，导致回调函数不会触发。建议调整为使用addEventListener绑定加载事件，或先绑定事件再指定popup的跳转地址。

function task() {
  // 先创建空popup窗口绑定事件再跳转，避免onload漏触发
  var popup = window.open("about:blank");
  popup.onload = function(){
    // 用popup的document操作目标页面元素
    popup.document.getElementById("idName").value = "Hello World";
    // 删除多余的reload调用
  }
  // 绑定完事件再跳转目标地址
  popup.location.href = "https://somewebsite.com";
}

注意：该代码仅在你的当前页面和目标站点同源的场景下可以生效，跨域场景下前端原生JS无法实现该需求，需要借助浏览器插件、服务端代理等其他方案实现。

内容的提问来源于stack exchange，提问作者Mr.Curious