默认隐藏 iframe答案

【问题标题】：Hiding an Iframe by Default默认隐藏 iframe
【发布时间】：2015-08-14 05:57:25
【问题描述】：

在其中一个页面中，我需要一个 iframe，但是当用户加载该页面时，我希望它默认隐藏。现在我有一个隐藏和显示按钮来隐藏和显示 iframe，但它默认显示。如何默认隐藏？

这是两个按钮的代码

<input type="button" value="Show Graph" onClick="$('graph').show();">
<input type="button" value="Hide Graph" onClick="$('graph').hide();">

【问题讨论】：

【解决方案1】：

你试过这样使用 CSS 吗？

iframe {
   display:none;}

虽然这取决于您是否也想保留该区域。有了草图就更容易知道了。

您也可以使用 jQuery 在加载时隐藏。

function(){$('graph').hide();}

【讨论】：

【解决方案2】：

另外 - 由于您已经在使用 jQuery，您可以像这样在页面加载时简单地隐藏 iFrame：

<script type="text/javascript">
$(document).ready(function()
{
     $('#graph').hide();
});
</script>

工作演示： Demo

因此，您需要确保进行以下更改：

内嵌框架：

将id="graph" 添加到您的 iframe。

onClick 事件：

分别添加onClick="$('#graph').show();"和onClick="$('#graph').hide();"

【讨论】：

我尝试在 head 标签内和图表正上方添加它，但它不起作用。我重新加载页面，它仍然显示。
我好像漏掉了
该演示适用于我，但它在我的应用程序中不起作用......很奇怪。
您是否尝试将代码包装在
当将 onclick 更改为#graph 时，它停止工作，即使 id='graph'，即使我把你告诉我的默认隐藏，它也不起作用（即使我尝试使用图表而不是#graph）。为什么它不起作用令人困惑......

【解决方案3】：

如果你把它放在你的 <head> 标签中，它应该会为你隐藏它

<script type="text/javascript">
$(function() {
    $('graph').hide();
});
</script>

尽管您可能要仔细检查您是否只是在使用 'graph' - 在 jQuery 中将引用 <graph> 元素； '#graph' 将引用 id 为“graph”的 iframe

【讨论】：

【解决方案4】：

我知道三种方式：

您将高度和宽度设置为 0。
为 iframe 设置一个 ID（例如“hideframe”）并在头部或外部样式表中添加这个
```
#hideframe{display: none;}
```

使用 jQuery

$(document).ready(function(){        
   $("#hideframe").css("display", "none");        
});

或者

$(document).ready(function(){
    $("#hideframe").hide();
});

确保 jQuery 确实包含在页面的头部。很多时候我听到人们说有些东西在 jQuery 中不起作用。原来他们指向 jQuery 库的 URL 是错误的，所以请确保您不会陷入这种情况。

【讨论】：

【解决方案5】：

我错过了什么吗.. 但您可以按如下方式自行调用 jQuery 函数

(function (){ $('iframe').hide(); })();

【讨论】：