iframe 仅在点击后显示？答案

【问题标题】：iframe show only after click?iframe 仅在点击后显示？
【发布时间】：2013-03-07 00:46:21
【问题描述】：

我有以下代码：正在显示 iframe，但我喜欢在提交表单之前隐藏它。使用 Div 而不是 iframe 会更好吗？我喜欢在提交表单时摆脱已经存在的 div。

<script type="text/javascript">  
function showIFrame() {  
 var iframe = document.getElementById("myiframe");  
 iframe.style.display="block";  
}  
</script>

在我的 css 文件中

#myiframe {
display:none; }

<form name="search" id="search" method="get"      action="http://tmccaffery.outsideagents.com/travel/car/search.rvlx" target="carsearch">

<iframe id="myframe" name="carsearch" width="535" height="625" scrolling="no"   frameborder="0"></iframe>


<button type="submit" id="SearchCarButton" class="submitBtn" onclick="showIFrame()"/>  <span>Search</span></button>

【问题讨论】：

标签： javascript ajax html iframe

【解决方案1】：

iframe.style.visibility="hidden";

并展示它：

iframe.style.visibility="visible";

编辑：您可以使用 onsubmit="JavaScriptCode" 事件来触发更改。

参考： http://www.w3schools.com/jsref/event_form_onsubmit.asp

【讨论】：

【解决方案2】：

jQuery 有在加载 iframe 时执行的 load 事件：

$('#myframe').load(function() {
   $(this).show();
});

【讨论】：

【解决方案3】：

把你的脚本改成这个:)

<script type="text/javascript">  
function showIFrame() {  
var iframe = document.getElementById("myiframe");  
iframe.style.visibility="visible";
}  
</script>

【讨论】：

【解决方案4】：

您在 HTML 中使用 id="myframe"，在 CSS 中使用 #myiframe。

要么将id="myframe" 更改为id="myiframe"，要么将#myiframe 更改为#myframe。

【讨论】：

我按照你说的做了，但 iframe 仍然显示，我想隐藏 iframe，直到你点击提交。
您确实只更改了其中一项，对吧，而不是两者都更改？ jsfiddle.net/6NZaS

【解决方案5】：

您使用了错误的 id - 在您的 css 中您使用的是“#myiframe”而不是“#myframe” - 没有“i”。

这是正确的代码：

#myframe { display:none; }

【讨论】：