Resizing the iframe after form submit doesn't work
Question
I have the following html file. I have a form which upon submit should call the foo() function. The foo() function should make the iframe cover the whole page. But it doesn't work. It only works if I call the only line in the foo() function from the Javascript console in Chrome.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #content { position:absolute; left: 0; right: 0; bottom: 0; top: 0px; } </style> </head> <script> function foo() { document.getElementById("content").style = "display: inline-block;" } </script> <body> <form id="form1" onsubmit="foo()"> <input type="text" name="q" id="q" /> <input type="submit" id="search" value="Search" /> </form> <div id="content" style="display: none;" > <iframe width="100%" height="100%" frameborder="0" src="http://example.com/" /> </div> </body> </html>
2 answers
solution1
0 2018-02-08 07:44:12
That is because after submitting, the page gets reloaded. You should use php to manage form submits.
solution2
0 2018-02-08 07:50:05
You can do it in a fiddle like this, you echo the response and prevent the page from reloading. You can probably apply the same behavior in your app by returning false.
HTML:
<form id="form1" name="form1" actopm="/echo/html/" method="post">
<input type="text" name="q" id="q" />
<input type="submit" value="submit" />
</form>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="https://example.com/" />
</div>
JS:
var form = document.forms.form1;
form.onsubmit = function() {
document.getElementById("content").style = "display: inline-block;"
return false;
}
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#form1 {
margin: 10px;
padding: 10px;
background-color: lightgray;
}
#content {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
border: 2px solid red;
background-color: darkgray;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.