我有一个简单的iFrame ......
<iframe src="url" width="980px" height="90px" id="inviteFrame" name="inviteFrame" scrolling="no"></iframe>
我知道我无法在框架内的元素上捕获点击事件,但是在iFrame本身上如何简单点击或mousedown?
$('#inviteFrame').click(function() {
console.log('test');
$(this).attr('height', '140px');
});
这对我不起作用!
答案 0 :(得分:7)
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');
答案 1 :(得分:1)
由于网络浏览器的same origin policy。
,您无法执行此操作但是您可以使用blur事件和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)
}
});
});
享受!