使用 jquery 没有删除响应式 iframe 的空白

Posted 2023-05-09

【中文标题】使用 jquery 没有删除响应式 iframe 的空白

【英文标题】：White space of responsive iframe is not getting removed using jquery

【发布时间】：2017-10-21 07:24:50

【问题描述】：

我正在使用 Bootstrap 的响应式嵌入来嵌入 iframe。但是，我要求如果 iframe 为空（即当 src 为空字符串时），它会被隐藏。但是，虽然 iframe 在没有文件可显示时被隐藏，但空白仍然存在。

用于响应式嵌入的代码-sn-p：

<div class="row" id="responsive-iframe">
    <div class="embed-responsive embed-responsive-16by9" id="iframe-embed">
        <iframe class="embed-responsive-item" src="" id="iframe" ></iframe>
    </div>
</div>

使用 jquery 隐藏它的 Code-sn-p：

<script>
   $(function() 
        $('#iframe').load(function()             
          if($.trim($(this).contents().find("body").html()) == "") 
            $('#responsive-iframe').css("display", "none");
          
        );
    );
</script>

我还尝试将 iframe 的显示属性更改为display: none;，在阅读后它可能会工作但仍然失败。

编辑：完整代码-https://www.bootply.com/sahildhawan22/ygaJiHuKGg

【参考方案1】：

如果 iframe 为空（即当 src 为空字符串时），它将被隐藏。

知道学生是否上传简历的唯一方法是知道 iframe 的 src 是否为空字符串

不要在$.load() 中测试。您可以测试一下src 是否为空字符串。

$(function() 
  if($('#iframe').attr('src').trim() == '') 
    $('#responsive-iframe').css("display", "none");
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    asdf
  </div>
  <div class="row" id="responsive-iframe">
    <div class="embed-responsive embed-responsive-16by9" id="iframe-embed">
        <iframe class="embed-responsive-item" src="" id="iframe" ></iframe>
    </div>
  </div>
  <div class="row">
    bar
  </div>
</div>

【讨论】：

空白仍然存在@MichaelCoker

@sahildhawan 它是否保留在我的演示中？我没看到。

是的，您的代码在这里可以工作，但是当我在我的代码中这样做时，它就不行了。我应该分享整个代码吗？ @michelcoker

bootply.com/sahildhawan22/ygaJiHuKGg 这是我的完整代码。 @michaelcoker

由于某种原因，当我在 Sublime 中编写代码并在 Chrome 中打开它时，这不起作用，我快疯了。 @michaelcoker

【参考方案2】：

如果不设置 src 属性，我认为不会触发 .load 事件

【讨论】：

那么如何实现呢？

保留代码就像你现在拥有的一样......但是必须有一个地方设置src？在那个地方做一个$('#responsive-iframe').css("display", "none");如果没有src...如果没有看到其余的代码是很困难的

其实我正在为我的大学做一个招聘网站，我想做的是如果学生不添加简历，16*9 的空间就会被隐藏。我正在从数据库中获取简历的 URL，知道学生是否上传简历的唯一方法是知道 iframe 的 src 是否为空字符串。