Question

我正在尝试在单击按钮时显示iframe。我得到了以下JS代码：

＆＃13;

function show() {
    var iframe1 = document.getElementById('iframe');
    iframe1.style.display = 'block';
}

＆＃13;

这是我的页面的HTML：

＆＃13;

<!DOCTYPE html PUBLIC>
<html>
  <head>
    <title>Welcome</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="global.css"/>
    <link rel="stylesheet" type="text/css" href="buttons.css"/>
    <link rel="stylesheet" type="text/css" href="paragraphs.css"/>
    <link rel="stylesheet" type="text/css" href="iframes.css"/>
    <script type="text/javascript" src="files.js"></script>
  </head>
  <body>
    <form> <button id="files" onclick="show()">Files</button> </form>
    <iframe id="iframe" src="files.html" width="200" height="100"></iframe>
  </body>
</html>

＆＃13;

该脚本位于名为files.js的外部文件中。当我测试代码时，它可以工作，但iframe只显示1毫秒。怎么了？

提前感谢您的回答！

Answer 1

将type="button"添加到<button>。就像现在一样，它位于一个表单中，并且没有任何类型属性 - 这样它默认为键入submit，因此当您单击它时，页面将被提交并消失。

此外，将onclick="show()"更改为onclick="show"，或者更好 - 改为使用.addEventListener()。

function show() {
    var iframe1 = document.getElementById('iframe');
    iframe1.style.display = 'block';
}

<!DOCTYPE html PUBLIC>
<html>
  <head>
    <title>Welcome</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="global.css"/>
    <link rel="stylesheet" type="text/css" href="buttons.css"/>
    <link rel="stylesheet" type="text/css" href="paragraphs.css"/>
    <link rel="stylesheet" type="text/css" href="iframes.css"/>
    <script type="text/javascript" src="files.js"></script>
  </head>
  <body>
    <form> <button type="button" id="files" onclick="show">Files</button> </form>
    <iframe id="iframe" src="files.html" width="200" height="100"></iframe>
  </body>
</html>

编辑：响应OP评论的其他代码：

var iframeShowing = false;

function show() {
    var iframe1 = document.getElementById('iframe');
    iframe1.style.display = iframeShowing ? 'block' : 'none';
    iframeShowing = !iframeShowing;
}

Answer 2

表单导致页面重新加载。您可以通过简单地添加event.preventDefault（）来阻止它。 function show(e) { e.preventDefault(); ...

但是，您需要在函数调用中注入event参数。 onclick="show(event)"

您拥有的另一个选项是删除表单标记并保留按钮标记。这应该可以解决问题。

如何通过单击按钮显示iframe（JavaScript）

2 个答案: