jQuery点击事件不工作时，全屏iframe在后台

jQuery click event does not work when fullscreen iframe in the background?

本文关键字：全屏 iframe 后台 工作 事件 jQuery      更新时间：2023-09-26

当背景中有全屏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;
}

我想隐藏/切换绿色框时，然后点击发生外框。

我该如何解决这个问题?

要访问iframe，可以使用.contents():

$(document).ready(function() {
    $('[name="frame"]').on('load', function() {
        $(this).contents().click(function() {
        if ($('.overlay').is(':visible')) $('.overlay').hide();
        else $('.overlay').show();
        });
    });
});

.contents()方法也可用于获取iframe的内容文档，如果iframe与主页在同一域。

https://api.jquery.com/contents/

如果内容在另一个域中，唯一的选择可能是在它上面放一个元素。

编辑-调整代码，在应用事件处理程序之前等待iframe加载是很重要的…

如果事件是关于那个div (overlay)，你应该用jquery在overlay类中添加listener，试试下面的例子并告诉结果

$(".overlay").click(function (){
 $(this).slideToggle();
}):

或

$(".overlay").click(function (){
 if($(this).hassClass('hide')){
  return $(this).removeClass('hide');
 }
 return $(this).addClass('hide');
});
css 

 .hide{
    display:none;
    }
相关文章：