JavaScript实现页面间传值的两种方案
本文介绍两种纯前端JavaScript实现页面间传值的方法,无需服务器端技术。第一种通过window.location.replace将参数拼入URL,接收方利用正则表达式解析查询字符串;第二种利用表单隐藏域(hidden input),在提交前由JS赋值,目标页通过URL参数获取。两种方案均依赖目标页面预先存在,适用于简单的静态页面数据传递场景。
JavaScript页面间传值概述
本文介绍一种利用JavaScript在网页之间传递数据的具体实现方式,供开发者参考。
具体需求如下:
问题描述与需求分析
在 a.html 页面中,<form> 表单的 onsubmit 事件触发一个名为 foo() 的方法。该方法旨在打开 b.html 页面的同时,将参数传递给 b.html。要求方法 foo() 能将变量值传递到 b.html,且 b.html 能接收这些参数,整个过程不能使用服务器端技术。
以下是具体的解决代码实现:
a.html 页面的代码如下:
方案一:URL传参与解析
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
function foo(){
var a ="abc"; // a为变量值
var str = "b.html?id="+a+";";
//alert(document.frm.action);
//方案一(无效)
// document.frm.action = str;
//方案二(无效)
// window.location.href = str;
//方案三(有效)
window.location.replace(str);
return false;
}
</script>
</head>
<body>
<FORM name="frm" method="get"
onsubmit = "return foo()" >
<INPUT TYPE="SUBMIT" />
</FORM>
</body>
</html>
注意:执行此操作时,必须确保 b.html 页面已经预先存在。
b.html 页面接收参数值的代码如下:
b.html 的部分相关代码片段如下:
var getQueryString = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2]; return "";
}
补充另一种实现方案:
myjs.js 文件的代码如下:
方案二:表单隐藏域传参
function foo(){
var str = "abc";
//document.forms[0].hid.value = str;
var frm = window.event.srcElement;
frm.hid.value = str;
return true;
}
a.html 页面的代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script src="myjs.js"></script>
</head>
<body>
<FORM name="frm" METHOD="get" ACTION="b.html"
onsubmit="return foo()">
<INPUT TYPE="hidden" id="hid" name="hid">
<INPUT TYPE="submit" value="提交">
</FORM>
</body>
</html>
注意:在向 b.html 页面传值时,必须确保 b.html 页面事先已存在。
b.html 页面的代码如下:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(decodeURIComponent(location.search.substr(3)));
</SCRIPT>
</BODY>
</HTML>
希望本文所述的JavaScript程序设计内容能对读者有所帮助。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
