Question

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

这是我对两个按钮的代码

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

Answer 1

您是否尝试使用这样的CSS？

iframe {
   display:none;}

虽然这取决于你是否也希望保留该区域。通过草图，它将更容易知道。

你也可以使用jQuery隐藏加载。

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

Answer 2

另外 - 既然你已经在使用jQuery，你可以简单地在页面加载上隐藏iFrame，如下所示：

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

工作演示： Demo

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

iframe：

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

onClick活动：

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

Answer 3

如果您将其放在<head>标记中，则应该为您隐藏

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

虽然你可能要仔细检查你是否只是使用'graph' - 在jQuery中引用<graph>元素; '#graph'会引用ID为“graph”的iframe

Answer 4

我知道有三种方式：

使用jQuery

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

或者

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

确保jQuery实际包含在页面的头部。很多时候我听到人们说jQuery中的某些东西不起作用。事实证明他们对jQuery库的URL是错误的，所以请确保你不会陷入这种情况。

Answer 5

我错过了什么......但是您可以自行调用jQuery函数，如下所示

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