HTML静态页面跳转传值的JavaScript实现方法

作者:窗边听雨

时间:2026-10-30

浏览:280

本文介绍在HTML静态页面间通过URL问号传值及JavaScript接收参数的处理方法。通过示例展示如何构造带参数的链接,并使用自定义JS工具函数解析URL参数,实现页面跳转时的数据传递。

文章目录

HTML静态页面跳转传值概述

本文详细介绍在静态HTML页面之间进行跳转并传递参数的JavaScript处理方法。

URL传值与参数接收方法

在HTML页面中,可以通过URL问号(?)的方式传递参数。


<a href="index2.html?name=caoy">静态传值</a>

在目标页面index2.html中接收传递的参数。


var name=UrlParm.parm("name");

代码实现示例

具体实现代码如下:

index.html页面的实现:


<script type="text/javascript" src="getUrlParam.js"></script>
<a href="index2.html?name=caoy">静态传值</a>

index2.html页面的实现:


<script type="text/javascript">
  var name=UrlParm.parm("name");
  alert(name);
</script>

获取URL参数的工具函数getUrlParam.js:


UrlParm = function() { // url参数
 var data, index;
 (function init() {
  data = [];
  index = {};
  var u = window.location.search.substr(1);
  if (u != '') {
   var parms = decodeURIComponent(u).split('&');
   for (var i = 0, len = parms.length; i < len; i++) {
    if (parms[i] != '') {
     var p = parms[i].split("=");
     if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=
      data.push(['']);
      index[p[0]] = data.length - 1;
     } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =
      data[0] = [p[1]];
     } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
      data.push([p[1]]);
      index[p[0]] = data.length - 1;
     } else {// c=aaa
      data[index[p[0]]].push(p[1]);
     }
    }
   }
  }
 })();
 return {
  // 获得参数,类似request.getParameter()
  parm : function(o) { // o: 参数名或者参数次序
   try {
    return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
   } catch (e) {
   }
  },
  //获得参数组, 类似request.getParameterValues()
  parmValues : function(o) { // o: 参数名或者参数次序
   try {
    return (typeof(o) == 'number' ? data[o] : data[index[o]]);
   } catch (e) {}
  },
  //是否含有parmName参数
  hasParm : function(parmName) {
   return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;
  },
  // 获得参数Map ,类似request.getParameterMap()
  parmMap : function() {
   var map = {};
   try {
    for (var p in index) { map[p] = data[index[p]]; }
   } catch (e) {}
   return map;
  }
 }
}();

总结与参考资源

通过上述方法,即可实现HTML页面跳转时的参数传递。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章