JavaScript实现页面跳转与传值的多种方法详解

在某些场景下，当特定事件触发时，我们需要先执行一系列操作，随后再执行页面跳转。此时，通过JavaScript来实现这一功能显得尤为必要。

具体实现方式如下所示。

页面跳转的基本实现方式

第一种情况：跳转至新页面，且要求在新窗口中打开。

 
function gogogo()
{ 
//在此处执行其他操作...
window.open("test2.html");
} 

window是JavaScript的一个内置对象，我们可以调用其open方法来实现跳转。需要注意的是，如果目标页面不是相对路径，则必须加上http://协议头，例如：

 
function gogogo()
{ 
window.open( "http://www.google.com");
} 

第二种情况：在当前窗口中进行页面跳转。

 
function totest2()
{ 
window.location.assign( "test2.html");
} 

虽然直接使用location.assign()也能实现，但使用window.location.assign()在语义上更为合理，它明确指向当前窗口location对象的assign()方法。

此外，location对象还提供了一个replace()方法用于页面跳转。该方法与assign()的主要区别在于：

replace()方法不会在History对象中生成新的记录。使用该方法时，新的URL将覆盖History对象中的当前记录。

利用window.opener进行页面间传值

接下来学习如何在页面跳转时传递数值。当使用window.open()打开新页面时，浏览器会建立两个窗口之间的打开与被打开关系。因此，在被打开的新窗口中，当前窗口的window对象包含一个window.opener属性，该属性存放着打开窗口的引用。通过获取此值，我们可以引用上一页面内的对象数值，示例如下：

 
<html>
<head>
<title>test1</title>
<script type="text/javascript">
function totest2()
{ 
window.open("test2.html");
} 
</script>
</head>
<body>
<label id="label1" >page test1</label>
<br><br>
<input type="text" id="tx1">
<input type="button" id="bt2" value="to test2" onclick="totest2()">
</body>
</html>

 
<html>
<head>
<title>test2</title>
<script type="text/javascript">
function getvalue()
{ 
var pare=window.opener;
if(pare!=null)
{ 
var what=pare.document.getElementById("tx1");
if(what!=null)
{ 
alert(what.value);
} 
} 
} 
</script>
</head>
<body>
<label id="label1" >page test2</label>
<br><br>
<input type="button" onclick="getvalue()" value="get test1 page value">
</body>
</html>

通过上述两个页面，可以从后一个页面获取前一个页面的值。不过，这种方法在实际应用中可能并不十分常用。

优点：取值便捷。只要window.opener指向父窗口，即可访问所有对象。

不仅可以访问数值，还可以调用父窗口的方法，且数值长度无限制。

缺点：两个窗口必须存在特定关系，即通过window.open打开的窗口，且不能跨域使用。

通过URL参数传递数据

下面介绍另一种方法，即在页面跳转间通过URL附加字段来传递值，此前在使用XMLHttpRequest时曾接触过这种方式。简单原始的示例如下：

 
<html>
<head>
<title>test3</title>
<script type="text/javascript">
function totest2()
{ 
var parm1=document.getElementById("tx1").value;
var parm2=document.getElementById("tx2").value;
var myurl="test4.html"+"?"+"parm1="+parm1+"&parm2="+parm2;
window.location.assign(myurl);
} 
</script>
</head>
<body>
<label id="label1" >page test3</label>
<br><br>
<input type="text" id="tx1">
<input type="text" id="tx2">
<input type="button" id="bt2" value="to test2" onclick="totest2()">
</body>
</html>

 
<html>
<head>
<title>test1</title>
<script type="text/javascript">
function getparm1()
{ 
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("&")[0];
var tmp3=tmp2.split("=")[1];
var parm1=tmp3;
alert(parm1);
} 
function getparm2()
{ 
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("&")[1];
var tmp3=tmp2.split("=")[1];
var parm2=tmp3;
alert(parm2);
} 
</script>
</head>
<body>
<label id="label1" >page test4</label>
<br><br>
<input type="button" id="bt1" value="get parm1" onclick="getparm1()">
<br><br>
<input type="button" id="bt2" value="get parm1" onclick="getparm2()">
</body>
</html>

记得之前在学习XMLHttpRequest时，有一个QueryString对象可以直接从URL参数中取值。不确定此处是否可以直接使用，尝试后发现似乎不可行。

使用Cookie实现页面间数据共享

最后一种页面间传值的方法是Cookie共享，这比较容易理解。由一个页面在客户端机器上放置一个Cookie文件，下一个页面访问时，直接读取其中的值即可。