如何点击按钮后显示iframe 解决页面加载时iframe默认展示问题

你的问题核心有两点：

1. 页面加载时没有给iframe设置隐藏样式，浏览器默认iframe的display属性为block，所以初始会显示
2. 现有JS的切换逻辑写反了，第一次点击按钮反而会把iframe设为隐藏，不符合点击显示的需求

修复方案（两种可选，推荐第一种） #

方案1：直接给iframe加内联隐藏样式（最简便） #

直接修改iframe标签，添加style="display: none;"属性，同时修正JS的切换逻辑：

<form> <button type="button" id="files" onclick="show()">Database</button> </form>
<iframe id="iframe" frameBorder='no' style="display: none;" src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt"
  width="600" height="460"></iframe>

修正后的JS代码：

var iframeShowing = false;
function show() {
  var iframe1 = document.getElementById("iframe");
  // 逻辑调整：当前没显示就设为block，显示了就设为none
  iframe1.style.display = iframeShowing ? "none" : "block";
  iframeShowing = !iframeShowing;
}

方案2：通过JS初始化隐藏状态 #

如果你不想修改iframe的内联样式，可以在页面加载完成后执行初始化代码设置隐藏：

var iframeShowing = false;
// 页面加载完成后先把iframe设为隐藏
window.onload = function() {
  document.getElementById("iframe").style.display = "none";
}
function show() {
  var iframe1 = document.getElementById("iframe");
  iframe1.style.display = iframeShowing ? "none" : "block";
  iframeShowing = !iframeShowing;
}

内容的提问来源于stack exchange，提问作者Nathan