点击事件上的iframe？(Click-event on iframe?)

我有一个简单的iFrame ...

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

我知道我不能赶上点击框内的元素，但如何对事件简单的点击或的mousedown对自身的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:

你不能这样做，因为浏览器的的同源策略 。

但是你可以用一种变通方法与模糊事件和鼠标悬停/鼠标移开事件。 这是如何工作的我iframeTracker jQuery插件，旨在跟踪在I帧点击： 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)
        }
    });
});

请享用 ！

文章来源: Click-event on iframe?