HTML静态页面跳转传值的JavaScript实现方法
本文介绍在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程序设计有所帮助。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
相关标签:
