У меня есть iFrame в коде HTML, и я создал тег скрипта, который установил для кнопки отправки. Я хочу, чтобы окно 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}} - это URL-адрес, который передается пользователем в python Flask. Таким образом, в форме пользователь вводит слово, которое затем присоединяется к URL-адресу и выполняет поиск. Поиск работает отлично, но когда страница загружается при запуске, отображается Not Found, the requested URL has not been found..., и я понимаю, почему это происходит, поскольку URL-адрес еще не загружен. Поэтому я хочу сделать iFrame невидимым, и как только будет нажата кнопка submit, рамка станет видимой.
Я тоже пробовал с jQuery, но это не сработало.
Любая помощь и совет будут очень благодарны.