Question

当后台有全屏幕iframe时，jQuery点击事件不会触发：

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;
}

我希望隐藏/切换绿色框，然后点击在框外

。

任何想法我该如何解决这个问题？

Answer 1

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

Demo

$(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加载非常重要...

Answer 2

如果事件是关于那个div（覆盖）你应该在覆盖类中使用jquery添加listenner，试试这些例子并告诉结果

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

或

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

CSS

 .hide{
    display:none;
    }

当全屏iframe在后台时，jQuery点击事件不起作用？

2 个答案: