jQuery 后台全屏iframe点击事件不起作用？

Question

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

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

如果事件是关于 div（覆盖）的，您应该在覆盖 class 和 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;
    }

Answer 2

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

Demo

$(document).ready(function() {

    $('[name="frame"]').on('load', function() {

        $(this).contents().click(function() {

        if ($('.overlay').is(':visible')) $('.overlay').hide();
        else $('.overlay').show();
        });
    });
});

The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

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

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

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

jQuery 后台全屏iframe点击事件不起作用？

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

javascript

iframe

jquery

jquery-1.9