两个静态html之间相互传值

发表于 | 阅读次数:

关键词 ：url

主要思想： 通过url 在两个页面之间传值

1、 a.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>    
  <meta charset="UTF-8">    
  <title>a</title>
 </head>
<body>
  <input type="text" id="name" class="input7">
  <input type="button" value="OK" onclick="show()"/>

<script>    
  function show(){        
    var result = document.getElementById("name").value;        
    location.href="b.html?name="+result;      //利用url参数传递！！！
}
</script>
</body>
</html>

2、b.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>b</title>
</head>
<body>    
  <input type="button" onclick="getValue('name')" value="GetValue"/>
<script>    
function getValue(name) {        
  var str = window.location.search;   // location.search是从当前URL的?号开始的字符串        
  if (str.indexOf(name) != -1) {            
      var pos_start = str.indexOf(name) + name.length + 1;            
      var pos_end = str.indexOf("&", pos_start);            //检查是否有其他的参数传递
      if (pos_end == -1) {                
          alert(str.substring(pos_start));            
      } else {         
         alert("没有此值~~");            
      }        
  }    
}
</script>
</body>
</html>

3、效果图

Paste_Image.png