iFrame内调用document.getElementById及jQuery选择器无法获取元素排查

问题成因 #

1. DOM上下文不匹配：你当前运行的JavaScript代码处于iframe内嵌的Google Apps Script（GAS）页面内部，调用document.getElementById时检索的是GAS页面自身的DOM树，而myIframe、test两个元素属于外层父页面的DOM树，两个上下文完全隔离，自然无法获取到对应元素，返回null后操作src属性就会抛出类型错误。
2. 同源策略限制：父页面域名与GAS iframe的域名（script.google.com）不属于同源，即使你尝试通过window.parent.document跨上下文访问父页面元素，也会被浏览器的跨域安全策略拦截，无法完成元素读取和操作。
3. 另一账号下的相同代码可正常运行，大概率是对应场景下JS代码部署在了父页面中，或是GAS返回的页面内恰好存在对应ID的元素，不存在上下文不匹配的问题。

解决办法 #

根据你“重载iframe内的GAS页面且保留在iframe内部”的需求，可选择两种方案：

• 方案1：直接在iframe内部触发重载，无需访问父页面元素。在GAS页面的JS代码中直接执行以下代码即可完成自身重载：

window.location.reload()

• 方案2：若需要从父页面控制重载逻辑，将元素获取、重载相关的JS代码部署到父页面中，直接操作父页面DOM内的iframe元素即可：

// 父页面内运行的代码
const iframe = document.getElementById('myIframe')
// 重载iframe内容
iframe.src = iframe.src
// 或调用reload方法：iframe.contentWindow.location.reload()

如果需要从iframe内部触发父页面的重载操作，可通过postMessage实现跨域通信：

1. iframe内部GAS页面代码：

// 向父页面发送重载请求，建议将*替换为父页面实际域名提升安全性
window.parent.postMessage({type: 'reloadIframe'}, '*')

2. 父页面监听消息并执行重载：

window.addEventListener('message', (e) => {
  // 建议添加来源校验，避免恶意调用，可替换为你实际的GAS服务域名
  if (e.origin !== 'https://script.google.com') return
  if (e.data?.type === 'reloadIframe') {
    const iframe = document.getElementById('myIframe')
    iframe.src = iframe.src
  }
})

额外提醒：你父页面iframe的style属性中top:505x属于语法错误，应改为top:505px避免布局异常。

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