This is my iframe:
这是我的iframe:
#htmlDiv {
position: absolute;
top: 0px;
left: 300px;
height: 650px;
width: 1130px;
}
#htmlFrame {
position: absolute;
top: 0px;
left: 0px;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
height: 630px;
width: 1110px;
}
<div id="htmlDiv">
<iframe id="htmlFrame"></iframe>
</div>
$('#htmlFrame').click(function(){
alert('clicked');
});
But when I click inside the iframe, it doesn't show "clicked".
How do I detect click inside iframe.
但是当我在iframe中单击时,它不会显示“已点击”。如何检测iframe内的点击。
3 个解决方案
#1
4
You cannot detect a click event on an iframe
. What can be done is you can place a overlapping layer
on top of your iframe
and capture the click event of the overlapping div. See below snippet:
您无法在iframe上检测到点击事件。可以做的是,您可以在iframe顶部放置重叠图层,并捕获重叠div的click事件。见下面的代码:
$("#overlap").on("click",function(){
alert("click");
$("#overlap").css("z-index",-1);
});
$("#htmlFrame").on("mouseleave",function(){
$("#overlap").css("z-index",1);
});
#htmlDiv {
position: absolute;
top: 0px;
left: 300px;
height: 65px;
width: 113px;
}
#htmlFrame {
position: absolute;
top: 0px;
left: 0px;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
height: 63px;
width: 110px;
}
#overlap{
position: absolute;
background-color:trasparent;
top: 0px;
left: 0px;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
width: 110px;
height:63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="htmlDiv">
<iframe id="htmlFrame"></iframe>
<div id="overlap">
</div>
</div>
#2
0
Your current code is working fine, try to click it to the border of the iframe
and the alert will show. I tried to create a solution for you by adding an overlay to the iframe
您当前的代码工作正常,尝试将其单击到iframe的边框并显示警报。我尝试通过向iframe添加叠加层来为您创建解决方案
You can see the DEMO
你可以看到DEMO
<div id="htmlDiv">
<iframe id="htmlFrame"></iframe>
<div id="overlay">
</div>
</div>
#3
0
I did this:
我这样做了:
<div style="position:relative;">
<iframe src="..."></iframe>
<div style="position:absolute;top:0;left:0;right:0;bottom:0;eventual mouse cursor style" onclick="eventual alternative action"></div>
</div>
#1
4
You cannot detect a click event on an iframe
. What can be done is you can place a overlapping layer
on top of your iframe
and capture the click event of the overlapping div. See below snippet:
您无法在iframe上检测到点击事件。可以做的是,您可以在iframe顶部放置重叠图层,并捕获重叠div的click事件。见下面的代码:
$("#overlap").on("click",function(){
alert("click");
$("#overlap").css("z-index",-1);
});
$("#htmlFrame").on("mouseleave",function(){
$("#overlap").css("z-index",1);
});
#htmlDiv {
position: absolute;
top: 0px;
left: 300px;
height: 65px;
width: 113px;
}
#htmlFrame {
position: absolute;
top: 0px;
left: 0px;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
height: 63px;
width: 110px;
}
#overlap{
position: absolute;
background-color:trasparent;
top: 0px;
left: 0px;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
width: 110px;
height:63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="htmlDiv">
<iframe id="htmlFrame"></iframe>
<div id="overlap">
</div>
</div>
#2
0
Your current code is working fine, try to click it to the border of the iframe
and the alert will show. I tried to create a solution for you by adding an overlay to the iframe
您当前的代码工作正常,尝试将其单击到iframe的边框并显示警报。我尝试通过向iframe添加叠加层来为您创建解决方案
You can see the DEMO
你可以看到DEMO
<div id="htmlDiv">
<iframe id="htmlFrame"></iframe>
<div id="overlay">
</div>
</div>
#3
0
I did this:
我这样做了:
<div style="position:relative;">
<iframe src="..."></iframe>
<div style="position:absolute;top:0;left:0;right:0;bottom:0;eventual mouse cursor style" onclick="eventual alternative action"></div>
</div>