单击按钮时 iFrame 将不可见
Posted
技术标签:
【中文标题】单击按钮时 iFrame 将不可见【英文标题】：iFrame won't become visible when button is clicked 【发布时间】：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，而不是提交表单 - 那么您需要在事件处理中阻止提交按钮默认操作，或者将其设置为不同类型的按钮开始。跨度> 【参考方案1】：当您在 HTML 代码中调用 onClick 函数时首先传递“事件”，如下所示 *onclick="showIFrame(event)
然后在你的函数中，你接受“事件”作为这样的参数 *function showIFrame(event)
大多数情况下，单击按钮会触发您的页面刷新，因此您必须通过阻止默认操作来阻止它。像这样将“event.preventDefault()”添加到您的函数中 *event.preventDefault()
【讨论】：
您好，感谢您的意见。但是由于某种原因，添加 event.preventDefault() 仍然不会使 iFrame 可见。我将 event.preventDefault() 添加为函数的第一行。但它不会移动到下一行并使框架可见？ 您是否做了第一步，即在您的 html 代码中传递“事件” *onClick=showIFrame(event) 因为我运行了您的代码并且它有效 我确实这样做了，是的。感谢您的回答和建议。我会再试一次，希望能成功。以上是关于单击按钮时 iFrame 将不可见的主要内容，如果未能解决你的问题，请参考以下文章