Question

我正在尝试将jQuery偏移量用于iframe。我想获得相对于用户点击的iframe的鼠标点击位置。

此代码正在处理IMG，但不适用于IFRAME：

// Not working
$('iframe').click(function(e)
{   
    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var left = Math.round( (e.clientX - offset_l) );
    var top = Math.round( (e.clientY - offset_t) );

    alert("Left: " + left + " Top: " + top);

});

我在jsfiddle

中设置了一个代码示例

我怎样才能让它发挥作用？

Answer 1

iframe元素不允许点击等事件，但您可以在iframe上创建div并在其上应用点击功能，例如：

<div class="container">
  <iframe width="500" height="200" src="http://www.google.com"></iframe>
</div>

将样式添加到＆＃34;隐藏＆＃34;来自iframe的事件处理程序：

.container iframe{ pointer-events: none }

然后将点击事件从iframe更改为.container。

$('.container').click(function(e)
{   
    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var left = Math.round( (e.clientX - offset_l) );
    var top = Math.round( (e.clientY - offset_t) );

    alert("Left: " + left + " Top: " + top);
});

问题？ iframe将无法访问，但您可以使用Javascript管理它（使用iframe添加和删除指针事件样式）。

<强>更新：

我添加了一个fiddle来更好地解释答案（使用控制按钮启用＆＃34;启用＆＃34;或者＆＃34;禁用＆＃34; iframe）。

iframe上的jQuery偏移量

1 个答案: