iframe 上的点击事件？

Question

我有一个简单的 iFrame……

<iframe src="url" width="980px" height="90px" id="inviteFrame" name="inviteFrame" scrolling="no"></iframe>

我知道我无法捕捉框架内元素上的点击事件，但 iFrame 本身上的简单点击或鼠标按下怎么样？

$('#inviteFrame').click(function() {
    console.log('test');
    $(this).attr('height', '140px');
});

这对我不起作用！

Answer 1

jQuery 有一个名为.contents() 的方法，当在iframe 元素上使用该方法时，它会返回iframe 的文档。

// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);

现在您可以将事件绑定到它，获取尺寸，获取各种元素的样式等：

// Get width of iframe document
$(iframeDoc).width();

// Get height of iframe document
$(iframeDoc).height();

// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
    // do something
});

// Get the style of an element in the iframe
$('div', iframeDoc).css('backgroundColor');

Answer 2

由于网络浏览器的same origin policy，您无法执行此操作。

但是您可以使用模糊事件和 mouseover/mouseout 事件的解决方法。这就是我的 iframeTracker jQuery 插件的工作原理，旨在跟踪 iframe 上的点击：https://github.com/finalclap/iframeTracker-jquery

这是一个例子：

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

享受吧！