两个静态HTML互相传值

作者: _安哥拉 | 来源:发表于2017-01-04 14:24 被阅读145次

两个静态HTML互相传值
两个静态html页之间的传值
定位 position
静态Html 使用JavaScript 修改 href 值
vue 利用路由跳转界面传值
前端面试积累4-position
把vue项目放到python项目里
ThinkPHP实现静态缓存和动态缓存
html两个静态页面传递数据
iOS 静态库的生成

关键词：url

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

1、 a.html

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

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