iFrame 在加载时可见答案

【问题标题】：iFrame visible on loadiFrame 在加载时可见
【发布时间】：2021-04-09 02:42:26
【问题描述】：

加载 HTML 页面后，我的 iframe 网页立即可见。我不希望这种情况发生。它应该只在单击按钮时显示。为什么会这样？

<!DOCTYPE html PUBLIC>
<html>
  <body>
    <form> <button type="button" id="Open_Frame" onclick="show_iframe">Files</button> </form>
    <iframe id="iframe"
  src="https://picsum.photos/200/300"
  style="
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 80%;
    width: 80%;
    overflow: hidden;
    z-index: 10;
  ">
   </iframe>
  </body>
</html>

<script>
function show_iframe() {
    //Display iframe on click
}
</script>

【问题讨论】：

这能回答你的问题吗？ How to load a iframe only on button click

标签： javascript html iframe

【解决方案1】：

这种“隐藏和显示”功能的常用方法是更改元素的 CSS 属性 display or visibility（取决于您是否希望在隐藏后保留元素的空间）。

HTML 元素的可见性默认设置为可见，因此 iframe 将始终默认显示。

此外，您在 onclick 事件侦听器的函数 show_iframe 之后错过了一个 ()。

一个工作示例如下：

<html>

<body>
  <form> <button type="button" id="Open_Frame" onclick="show_iframe()">Files</button> </form>
  <iframe id="iframe" src="https://picsum.photos/200/300" style="
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 80%;
    width: 80%;
    overflow: hidden;
    z-index: 10;
    display: None;
    margin-top: 35px;
  ">
   </iframe>
</body>

</html>
<script>
  function show_iframe() {
    let myIframe = document.getElementById("iframe");
    if (myIframe.style.display == 'block')
      myIframe.style.display = 'None';
    else
      myIframe.style.display = 'block';
  }
</script>

【讨论】：

嘿，非常感谢！我完全忘记了显示器。我还有一个问题，这个按钮隐藏在 iframe 后面。所以我想在 iframe 顶部添加另一个按钮来关闭窗口。我该怎么做？
你需要稍微改变一下布局。解决问题的一种方法是在 iframe 和按钮之间添加一些边距。