Question

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

响应式嵌入的代码段：

<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隐藏它的代码片段：

<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

Answer 1

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

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

请勿在{{1}}中进行测试。您可以测试以查看$.load()是否为空字符串。

src

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

Answer 2

如果你没有设置src属性

，我认为不会触发.load事件

使用jquery不会删除响应式iframe的空白区域

2 个答案: