Question

我有以下html文件。我有一个表单，提交后应调用foo（）函数。 foo（）函数应该使iframe覆盖整个页面。但它不起作用。它只有在我从Chrome中的Javascript控制台调用foo（）函数中的唯一一行时才有效。

＆＃13;

 <!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>

＆＃13;

Answer 1

这是因为提交后，页面会重新加载。您应该使用php来管理表单提交。

Answer 2

你可以在这样的小提琴中完成它，你回应响应并阻止页面重新加载。您可以通过返回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;
}

DEMO：https://jsfiddle.net/r5nL20gz/1/

在表单提交后调整iframe大小不起作用

2 个答案: