单击按钮时 iFrame 将不可见答案

【问题标题】：iFrame won't become visible when button is clicked单击按钮时 iFrame 将不可见
【发布时间】：2020-08-21 08:56:35
【问题描述】：

我有一个 HTML 代码中的 iFrame，并且我创建了一个脚本标签，我在提交按钮上设置了它。我希望在单击提交按钮时 iFrame 可见，但这不起作用。这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}

#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;

}

#innerIframe
{

border: none;
position:relative;
top:-190px;
width:100%;
height:900px;

}

</style>


</head>
<body>

<h2>Web Service</h2>

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

<form class="example" method="post"  style="margin:auto;max-width:500px">
  <input type="text" placeholder="Search query" name="search2">
  <button type="submit" name="submit"  onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>

<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe"  style="visibility: hidden;" scrolling="yes"></iframe>
</div>

</body>
</html>

{{results}} 是用户在 python Flask 中传递的 URL。因此，用户在表单中输入一个单词，然后将其连接到 URL 并执行搜索。搜索工作完美，但是当页面在启动时加载时，它显示Not Found, the requested URL has not been found...，我理解为什么会发生这种情况，因为 URL 尚未加载。所以我想让iFrame不可见，一旦按下submit按钮，框架就可见了。

我也尝试过使用 jQuery，但没有成功。

我们将不胜感激所有帮助和建议。

【问题讨论】：

单击此按钮将提交表单，由于它没有指定明确的操作 URL，这将导致重新加载当前 URL。当然，您在previous“页面”上显示的任何 iframe，此后将不再可见。如果您只想在单击该按钮时显示 iframe，而不是提交表单 - 那么您需要在事件处理中阻止提交按钮默认操作，或者将其设置为不同类型的按钮开始。跨度>

标签： javascript html

【解决方案1】：

当您在 HTML 代码中调用 onClick 函数时首先传递“事件”，如下所示 *onclick="showIFrame(event)
然后在你的函数中，你接受“事件”作为这样的参数 *function showIFrame(event) {
大多数情况下，单击按钮会触发您的页面刷新，因此您必须通过阻止默认操作来阻止它。像这样将“event.preventDefault()”添加到您的函数中 *event.preventDefault()

【讨论】：

您好，感谢您的意见。但是由于某种原因，添加 event.preventDefault() 仍然不会使 iFrame 可见。我将 event.preventDefault() 添加为函数的第一行。但它不会移动到下一行并使框架可见？
您是否做了第一步，即在您的 html 代码中传递“事件” *onClick=showIFrame(event) 因为我运行了您的代码并且它有效
我确实这样做了，是的。感谢您的回答和建议。我会再试一次，希望能成功。