Question

在我的代码中，我尝试使用<iframe>或<script>标记在我DIV内放置广告，当用户点击DIV时，它会自动删除DIV其中包含广告。当我在DIV中加载图片时，我的代码效果很好，但是当我添加加载广告内容的<iframe>或<script>标记时，它不会删除div。我不知道为什么？是否有任何功能可以自动检测DIV功能上的点击并将其删除？

以下是实时工作示例https://jsfiddle.net/infohassan/uvzjj9h4/2/

这是我的HTML

$(document).ready(function() {
  $('.custom_closebtn').click(function() {
    $('.custom_ads_placement').remove();
  });
});
$(document).ready(function() {
  $('.custom_adContent').click(function(e) {
    $('.custom_ads_placement').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom_ads_placement" style="z-index:10000;">
  <div class="custom_closebtn">Close Ad</div>
  <div class="custom_adContent" style="z-index:12000;">
    <iframe src="http://exampledomain.com/ad.php" width="330" height="400" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" >Your Browser Do not Support Iframe</iframe>
  </div>
</div>

Answer 1

您的img覆盖了所有custom_ads_placement div，因此当您点击div时，您实际上是在点击img＆amp;不在div上，你应该使用这个选择器： .custom_ads_placement img

这是您应该实施的脚本：

 $(document).ready(function(){ 
      $('.custom_closebtn').on('click',function() { 
    $('.custom_ads_placement').hide();

      });
        $('.custom_ads_placement img').on('click',function() { 
    $('.custom_ads_placement').hide();

      });
    });

此处是IMAGE JSFIDDLE / iFRAME JSFIDDLE

的更新

Answer 2

我能够使代码正常工作，但是jquery中的.remove（）并不是所有浏览器都完全支持请参阅：https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove 您可能会考虑采用不同的策略。

以下是更新的答案：

$(document).ready(function() {

  $('.custom_adContent').click(function(e) {
    document.getElementsByClassName('custom_adContent')[0].innerHTML="";
  });

   $('.custom_closebtn').click(function() {

    document.getElementsByClassName('custom_ads_placement')[0].innerHTML="";
  });
});

Answer 3

如果我没弄错的话你有一个带有javascript的iFrame，它会在iframe上点击一下来关闭。

这有一些问题：

您无法从iframe修改父dom。出于安全原因，浏览器不支持此功能。

允许跨域通信您可以使用window.postMessage并向父母发送消息，如下所示：

SELECT AthleteID,
       min(YEAR)
FROM your_table
GROUP BY AthleteID
HAVING min(YEAR) = 2017

然而，这要求父窗口正在侦听这样的消息

top.postMessage('close_iframe', '*')

你的另一个（也可能是最后一个）选项是创建一个库并让用户添加它，然后这个库将创建iframe和所有相关的组件，这样它就会嵌入到页面和所有JavaScript中将在iframe之外。

Answer 4

如果您想删除iframe，只需用容器覆盖

即可

 <div style="position:absolute;top:0;left:0;width:100%;height:100%"></div>

将样式添加到父

postion:relative

然后点击工作 JSFiddle

iframe发生是因为在子窗口上进行了点击，因此您可以像iframe一样在iframe中执行操作。

单击Jquery关闭div

4 个答案: