点击 IFRAME 的陷阱答案

【问题标题】：Trap for click on IFRAME点击 IFRAME 的陷阱
【发布时间】：2012-02-22 09:43:33
【问题描述】：

我有一个 iframe，里面有一个来自 somwhere 的视频链接。我想在点击 iframe 时弹出一个 div。

<a href="javascript:alert();" class="iframelink">
                <iframe src="http://www.youtube.com/embed/zDNXx-PgU3k" width="213" height="195" frameborder="0"></iframe>
            </a>


$('.iframelink').click(function(){   
         alert('iframe clicked. Open popup.'); 
})

怎么样？但是因为实际上是另一个页面 javascript 无法捕获点击事件。有什么办法吗？

【问题讨论】：

您要捕获什么点击事件？
当指针位于元素内部时，鼠标按钮被按下。当指针在元素内时释放鼠标按钮。

标签： javascript jquery iframe popup

【解决方案1】：

除了相当顽皮并在 IFRAME 顶部放置一个不可见的元素（点击劫持）之外，我认为您不走运，因为我认为 IFRAME 内的事件根本不会冒泡。在这里小心 - 你在危险的领域。怪怪的。

附：一种选择是让 IFRAME 指向您网站上的一个页面，您可以向其中添加一个 onclick 事件 - 然后在父元素上触发一个函数/事件 - 但是你仍然会不走运它涉及到点击我认为的 FLASH 对象时触发。

【讨论】：

实际上我想在 iframe 内显示视频，但尺寸较小。当用户单击 iframe 运行视频时，我将弹出一个框并运行视频。我知道，但有什么解决方法吗？
啊，我明白了 - 我误解了你想要达到的目标。猎人的回答可能更合适。顺便说一句，为什么你需要在 iframe 中显示视频 - 你可以在页面上显示视频缩略图并肯定会附加一个 onclick 事件？
当然。有什么方法可以在 div 中显示来自 url 的视频缩略图？
您可以使用此 URL 获取 YouTube 视频的缩略图：img.youtube.com/vi/<YouTube Video ID>/0.jpg 0.jpg 可以更改为 1.jpg 以获得较小版本的图像。您可以在 IMG 标记中使用它，也可以将其设置为 DIV 元素中的背景图像，并显式设置宽度和高度以匹配缩略图。
有关在 IFRAME 上分层的更多信息，请参阅以下问题和答案：stackoverflow.com/a/4788044/683808

【解决方案2】：

您可以尝试利用 YouTube API。

http://code.google.com/apis/youtube/js_api_reference.html#Adding_event_listener

虽然它是有限的，但你可以做你需要做的。

【讨论】：

那么，对于其他视频提供商，我该怎么办？当点击 iframe 制作处理程序时，是否有任何通用解决方案？

【解决方案3】：

由于您必须将处理程序附加到 iframe 内的链接上，因此您应该在 iframe 内找到它。试试这个。

$('a.iframelink iframe').contents()//Will get iframe contents
.find('videoLinkSelector')//Pass the required selector
.click(function(){
   //Write your code here
});

contents()参考：http://api.jquery.com/contents/

请注意，只有当 iframe 资源与其父页面位于同一域中时，您才能访问它。

【讨论】：

如果 iframe 内容来自另一个域，这将不起作用，因为同源策略。
是的，您不能访问其他域的任何资源。