Javascript 在后台使用全屏iframe时，jQuery click事件不起作用？_Javascript_Jquery_Iframe_Jquery 1.9

Javascript 在后台使用全屏iframe时，jQuery click事件不起作用？

javascript jquery iframe

Javascript 在后台使用全屏iframe时，jQuery click事件不起作用？,javascript,jquery,iframe,jquery-1.9,Javascript,Jquery,Iframe,Jquery 1.9,当背景中有全屏iframe时，不会触发jQuery click事件： JS: 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%"></ifr

当背景中有全屏iframe时，不会触发jQuery click事件：

JS:

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>

我想在框外单击时隐藏/切换绿色框

有什么办法可以解决这个问题吗？

如果事件与该div（overlay）有关，您应该使用jquery在overlay类中添加listenner，请尝试以下示例并说明结果

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

或

css

要访问iframe，可以使用

.contents（）

：

如果iframe与主页在同一个域中，那么也可以使用.contents（）方法获取iframe的内容文档

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

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

我希望在.overlay外单击-而不是在其上单击。从Codepen中选择快速选择，版本为2.1.3，但已在1.2中引入。编辑答案-在附加处理程序之前等待加载iframe。干杯，制作了一个本地演示来进行调试。在这种情况下，在Codepen上不容易做到。。。

body {
  margin: 0;
}

.overlay {
  width:200px;
  height:200px;
  background-color: green;
  position:fixed;
  top:0;
  left:0;
  z-index: 10;
}

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

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

 .hide{
    display:none;
    }

$(document).ready(function() {

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

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

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