javascript - 如果元素是 iframe，如何捕获 Click 事件？

Question

我在 id 为 div1 的 div 中附加了一个带有 youtube 嵌入 url 的 iframe。当 iframe 上发生点击时，我想做一些事情。

我正在使用这个 jquery 代码，但它不工作。

$('#div1 iframe').bind('click', function(){
         alert('clicked on iframe');
});

Answer 1

function iframeclick() {
    document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
        document.getElementById("theiframe").contentWindow.location.reload();
    }
}

Answer 2

我不确定你是否有 iframe 的 id。但是您甚至可以尝试捕捉 iframe 中文档的点击：

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

虽然这并不能解决您的跨站点问题，但 FYI jQuery 已更新为与 iFrames 配合使用：

$('#iframe_id').bind('click', function(event) { });

Answer 3

我们可以将 achive 与 jquery 一起使用，它也可以与 javascript 一起使用

$('.inner iframe').bind('click', function(){
             alert('clicked on iframe');
    });

Answer 4

这是一个香草 JS 的解决方案 - 并为我解决了一个类似的问题，如果单击 iFrame，我需要关闭父级上的一些下拉菜单

  public static iFrameClickHandler = {
        iFrame: undefined,
        mouseOverIframe: false,
        mouseOver: function() {
            this.mouseOverIframe = true;
        },
        mouseLeave: function() {
            this.mouseOverIframe = false;
            window.focus();
        },
        windowBlur: function() {
            if (this.mouseOverIframe) this.fireClickEvent();
        },
        fireClickEvent: function() {
            // do what you wanna do here
        },
        init: function() {
            this.mouseOver = this.mouseOver.bind(this);
            this.mouseLeave = this.mouseLeave.bind(this);
            this.windowBlur = this.windowBlur.bind(this);
            this.iFrame = document.querySelector('class/id of your iframe wrapper');
            this.iFrame.addEventListener('mouseover', this.mouseOver);
            this.iFrame.addEventListener('mouseleave', this.mouseLeave);
            window.addEventListener('blur', this.windowBlur);
            window.focus();
        },
        destroy: function() {
            this.iFrame.removeEventListener('mouseover', this.mouseOver);
            this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
            window.removeEventListener('blur', this.windowBlur);
        }
    }