当全屏iframe在后台运行时，jQuery click事件不起作用吗？
[英]jQuery click event does not work when fullscreen iframe in the background?
问题描述
后台有全屏iframe时，jQuery click事件不会触发：
JS：
$( document ).ready(function() {
$(document).click(function(){
if ($(this).find('.overlay').is(':visible')) {
$('.overlay').hide();
} else {
$('.overlay').show();
}
});
});
HTML：
<body>
<div class="overlay">Overlay</div>
<iframe src="iframe.html" name="frame" style="position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%"></iframe>
</body>
CSS：
body {
margin: 0;
}
.overlay {
width:200px;
height:200px;
background-color: green;
position:fixed;
top:0;
left:0;
z-index: 10;
}
我要隐藏/切换绿色框，然后在框外进行单击。
任何想法我该如何解决？
2 个解决方案
解决方案1
1 已采纳 2015-10-15 04:45:53
要访问iframe，可以使用.contents() ：
$(document).ready(function() {
$('[name="frame"]').on('load', function() {
$(this).contents().click(function() {
if ($('.overlay').is(':visible')) $('.overlay').hide();
else $('.overlay').show();
});
});
});
如果iframe与主页位于同一域中，则.contents（）方法还可用于获取iframe的内容文档。
https://api.jquery.com/contents/
如果内容在另一个域上，则唯一的选择可能是在其顶部放置一个元素。
编辑-已调整代码，请务必先加载iframe，然后再应用事件处理程序，这一点很重要...
解决方案2
0 2015-10-15 04:28:05
如果事件与该div（覆盖）有关，则应使用jquery在覆盖类中添加侦听器，请尝试以下示例并说明结果
$(".overlay").click(function (){
$(this).slideToggle();
}):
要么
$(".overlay").click(function (){
if($(this).hassClass('hide')){
return $(this).removeClass('hide');
}
return $(this).addClass('hide');
});
CSS
.hide{
display:none;
}
使用ajax覆盖内容时，jquery click事件不起作用
[英]jquery click event does not work when content is overwritten using ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.