如何让 iFrame 接受 ondblclick 事件？答案

【问题标题】：How to let the iFrame accept ondblclick event?如何让 iFrame 接受 ondblclick 事件？
【发布时间】：2010-12-12 09:16:06
【问题描述】：

我查看了 w3school ，它显示 ondbclick 事件是“在除 base、bdo、br、frame、frameset、head、html、iframe、meta、param、脚本、样式和标题之外的所有元素中有效。 “...

但是我真的想在 iframe 被 dbclick 的时候做点什么，我该怎么做呢？谢谢。

W3School 参考： http://www.w3schools.com/TAGS/ref_eventattributes.asp

【问题讨论】：

标签： javascript javascript-events

【解决方案1】：

观察 iframe 的加载事件，一旦触发，您可以将 ondblclick 分配给 iframe 内的文档。

<iframe src="some.htm" 
        onload="this.contentWindow.document.ondblclick=function(){alert('it work\'s');}">
</iframe>

注意：如果 iframe 中的文档位于父窗口之外的另一个（子）域上，这将受到同源策略的限制。

【讨论】：

【解决方案2】：

这可以使用 CSS 技巧：将空 div 放在 iframe 顶部并捕获该 div 元素的双击事件。这是所需的代码：

<div style="position: relative;">
    <div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 100;">
        <iframe src="myotherpage.html" width="500" height="300"></iframe>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 999;" ondblclick="alert('frame double clicked');"></div>
</div>

这里的“核心”是设置两者的 z-index，DIV 具有更大的值，当然它们的大小相同。

使用 jQuery，通过在页面加载时添加额外的 div 并动态应用所需的 CSS，使其“通用”应该非常简单（尽管不是微不足道的）。

【讨论】：