javascript - 具有外部 URL 的 iframe，文档单击不起作用

Question

我试图让文档点击 iframe，但它似乎没有拾取文档点击事件，所以我尝试显式生成 iframe 点击，它似乎与内部内容一起工作，但当我输入外部 URL 时它没有触发点击事件，

HTML

<iframe id="myframe" src="http://kooldotnet.blogspot.in/2013/07/image-resize.html"></iframe>

Jquery

$('#myframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

Sample Code

请帮助我如何获取它

更新

When I tried in jsfiddle the ifram src as www.google.com it is working.

Modifying code from @A. Wolf

I got following fiddle

mouseenter working but not click

谢谢

Answer 1

由于同源策略，您无法将事件绑定(bind)到跨域 iframe 的内容(如果 iframe 本身没有明确处理)。

关于您的具体情况，将点击事件绑定(bind)到 iframe 的主体，您可以使用此解决方法:

$(focusWindow);

$('iframe').on('mouseenter', function () {
    window.targetedIframe = this;
    $(window).on('blur', iframeclicked);
}).on('mouseleave', function () {
    $(window).off('blur', iframeclicked);
    if($(document.activeElement).is('iframe'))
        focusWindow();
});

function iframeclicked(){
    console.log('iframe clicked', window.targetedIframe);
}

function focusWindow(){
    $('<div/>').attr('tabindex',-1).appendTo('body').focus().remove();
}

-jsFiddle-