JavaScript点击iframe内部元素无法获取tagName问题求助

• 你的clickfn仅在iframe加载完成时触发一次，没有绑定到iframe内部的点击事件，无法响应用户点击操作
• 写法document.getElementById("zzz").target不成立：iframe元素本身不存在target属性，你需要获取的是点击事件的触发目标，且该目标属于iframe内部的独立DOM树，无法直接通过父页面的document获取
• 未正确访问iframe的内部文档上下文：父页面和iframe是两个相互独立的文档环境，必须先获取iframe的内部文档对象才能绑定事件、读取元素属性

<div class="flex-child green">
  <p id="a">You clicked on: </p>
  <iframe
    id="zzz"
    srcdoc="<html><h1>hello</h1><button>click me!</button></html>"
    width="500"
    height="500"
    onload="clickfn()"
  ></iframe>
</div>

<script>
function clickfn() {
  // 兼容不同浏览器获取iframe内部文档对象的写法
  const iframeDoc = document.getElementById("zzz").contentDocument || document.getElementById("zzz").contentWindow.document;
  // 给iframe整个文档绑定点击事件监听
  iframeDoc.addEventListener('click', function(e) {
    // 从事件对象中获取触发点击的元素的tagName
    const tagName = e.target.tagName;
    document.getElementById("a").innerHTML = `You clicked on: ${tagName}`;
  })
}
</script>

<style>
.flex-container {
  display: flex;
}

.flex-child.green {
  flex: 1;
}
</style>

• 该方案仅适用于同源iframe，你当前用srcdoc属性写的iframe内容属于同源场景可以正常运行；如果iframe加载的是跨域地址，出于浏览器同源策略限制，父页面无法访问iframe内部DOM，该功能无法实现。

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