問題描述

我瀏覽了這篇文章.使用 JavaScript 檢測點擊進入 Iframe

但是，我仍然看到人們做了類似的事情.請告訴我該怎么做.

一位開發者告訴我:

您可以在 IFRAME 頂部放置一個透明的 DIV.你的尺寸DIV 大小與 IFRAME 相同或更大.并且以更高的z-index CSS 屬性.

然后當您單擊 IFRAME 時，DIV 會收到該事件.

但由于世界并不完美，現在你失去了點擊的能力在 IFRAME 內.

但我對 div 不太擅長，并希望學習如何做到這一點.謝謝

附言它是關于跨域或異域 Iframeing.

如果我明白你在這里問的是什么:

jsFiddle

//在每個 IFRAME 上放置疊加層var W=0, H=0, X=0, Y=0;$(.iframe").each(function(i,el){W = $(el).width();H = $(el).height();X = $(el).position().left;Y = $(el).position().top;$(this).after('
');$(this).next('.overlay').css({寬度:W，高度:H，左:X，頂部:Y});});//跟蹤鼠標位置(覆蓋將阻止點擊 iframe 頁面)無功 mx = 0，我的 = 0；$('.overlay').on('mousemove click',function(e){mx = e.clientX - $(this).position().left;my = e.clientY - $(this).position().top;if(e.type==='click'){alert('點擊:X='+mx+' Y='+my)}});

I went through this post. Detect Click into Iframe using JavaScript

But still, I see people have done similar stuff. Please tell me how do I do this.

One developer told me:

You could put a transparent DIV on top of the IFRAME. You size that DIV to the same size or bigger than the IFRAME. And with a higher z-index CSS property.

Then when you click on the IFRAME, the DIV receives the event.

But as the world is not perfect, now you lost the ability to click inside the IFRAME.

But I am not so good with div's and looking to learn how to do this. Thanks

P.S. It is about Cross Domain or Alien Domain Iframing.

If I understand what you are asking here:

jsFiddle

// PLACE OVERLAY OVER EACH IFRAME
var W=0, H=0, X=0, Y=0;
$(".iframe").each(function(i,el){
   W = $(el).width();
   H = $(el).height();
   X = $(el).position().left;
   Y = $(el).position().top;
   $(this).after('<div class="overlay" />');
    $(this).next('.overlay').css({
        width: W,
        height: H,
        left: X,
        top: Y        
    });
});

// TRACK MOUSE POSITIONS (the overlay will prevent clicks on iframe page)
var mx = 0, my = 0;
$('.overlay').on('mousemove click',function(e){
    mx = e.clientX - $(this).position().left;
    my = e.clientY - $(this).position().top;

    if(e.type==='click'){
        alert('clicked at: X='+mx+' Y='+my)
    }        
});

這篇關于使用 Invisible div 檢測 IFrame 內的點擊的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！