如果没有 javascript 没有返回内容,如何隐藏 iframe

2023-12-06

我正在尝试制作一个具有特定大小的内容区域,但如果 api 返回的结果是,我希望不显示任何内容empty.

这是 html 的代码:

<div class="myclass">
        <iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>

我调用的 API 有时可能会返回 null 结果。 JavaScript 已经不在讨论范围之内了。 我尝试使用这样的 css 限制:

.myclass {
max-width: 1060px; 
max-height: 392px;

  & > iframe {
      min-height: 0;
      min-width: 0;
      max-width: 1060px;
      max-height: 392px;
    }

   & > iframe:empty {
    display: none;
 }
}

css 的行为是:iframe 始终隐藏,尽管我在其中有内容。 另外如果 iframe 是这样的:

<div class="myclass">
        <iframe frameborder="0" src="http://localhost:1000/example">
        <!--notice white-space here-->
        </iframe>
</div>

css 不会将 iframe 视为空。


我实际上没有使用 javascript 就实现了它。

但您需要创建一个生成 css 的代理。

如果下面的情况不存在,那么所有的赌注似乎都失败了。祝你好运!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('iframecheck.asp?url=http://www.example.com');
        iframe {
            width:1000px;
            height:400px;
        }
    </style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>

iframecheck 包含检查 url 是否有空响应的代码,如果有,则返回如下 css:

iframe {
    display:none;
}

哪个会自动覆盖另一个iframe style.

如果这样做,请不要忘记强制使用 text/css 内容类型标头。

<%response.ContentType="text/css"%>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果没有 javascript 没有返回内容,如何隐藏 iframe 的相关文章