在没有网络服务器的情况下,在两页之间导航和交换表格内

时间:2017-06-21 10:39:49

标签: html html5

我是html编码新手并尝试在没有任何网络服务器帮助的情况下探索html。

我有2个html页面放在名为1.html和2.html

的目录中

1.html是

<!DOCTYPE html>
<html>
<body>

<form action="2.html" method="POST">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>

</body>
</html>

和 2.html是

<!DOCTYPE html>
<html>
<body>

<form action="1.html" method="POST">
  First name:<br>
  <input type="text" id="firstname" name="firstname">
  <br>
  Last name:<br>
  <input type="text" id="lastname" name="lastname">
  <br><br>
  <input type="submit" value="Submit">
</form>
<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>


</body>
</html>

我需要知道,我可以使用什么机制将数据从1.html传输到2.html而不使用任何网络服务器。

手段,

如果我需要将1.html中的firstname显示为2.html,

undersection

<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>

我应该写什么代码?

1 个答案:

答案 0 :(得分:1)

尝试这个

  

1.HTML

<!DOCTYPE html>
<html>

<body>

<form action="2.html" method="GET">
  First name:<br>
  <input type="text" name="firstname" value="Mickey" >
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse" >
  <br><br>
  <input type="Submit" value="Submit" >
</form>

<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>

</body>
</html>
  

2.HTML

<!DOCTYPE html>
<html>
<body>
    <form action="2.html" method="GET">
      First name:<br>
      <input type="text" id="firstname" name="firstname" value="">
      <br>
      Last name:<br>
      <input type="text" id="lastname" name="lastname" value="">
      <br><br>
      <input type="submit" value="Submit">
    </form>
</body>
</html>

<script type="text/javascript">
    window.onload = function() {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      var pair ="";
      for (var i=0;i<vars.length;i++) {
           pair = pair + vars[i].split("=")+",";
      } 

      var arr=pair.split(",");
      document.getElementById('firstname').value = arr[1];    
      document.getElementById('lastname').value = arr[3];
    };
</script>