如果单击 iframe，如何运行功能

【问题标题】：how to run function if iframe is clicked如果单击 iframe，如何运行功能
【发布时间】：2021-08-08 07:12:27
【问题描述】：

想知道如果点击 iframe 是否有办法运行函数

 <iframe
    src="http://localhost:3001/collections/simple/title1/index.html"
    onclick={()=> alert('You click the iframe')}
 </iframe>

【问题讨论】：

标签： javascript html reactjs iframe

【解决方案1】：

想出了一个技巧来完成这项任务。刚刚创建了 iframe 的透明 div 覆盖。 div 有 onclick 事件

             <div
              id="overlay"
              onClick={() => alert("hello")}
              style={{
                position: "fixed",
                display: "block",
                width: "100%",
                height: "100%",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: 2,
                cursor: "pointer",
              }}
            ></div>
            <iframe
              src="http://example.com"
              style={{
                height: 80,
                width: 200,
                border: "none",
              }}
                    </iframe>

【讨论】：

【解决方案2】：

冒泡被指定仅通过单个文档树发生。 iframe 是一个单独的文档树，因此在其树中冒泡的事件在 iframe 文档的根处终止，并且不会越过边界进入主文档。

如果父页面是同一个域，也许你可以看到这个解决方案： Detect mousemove when over an iframe?

【讨论】：