JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

所属分类: 网络编程 / JavaScript 阅读数: 245
收藏 0 赞 0 分享
但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。
下面是具体的做法:
一:跳转到新页面,并且是在新窗口中打开时:
复制代码 代码如下:

function gogogo()
{
//do someghing here...
window.open("test2.html");
}

window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如:
复制代码 代码如下:

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

二:就在本页面窗口中跳转:
复制代码 代码如下:

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

如果直接使用location.assgin()也可以,但是window.location.assign()好像更合理一些,当前窗口的location对象的assign()方法。
另外,location对象还有一个方法replace()也可以做页面跳转,它跟assign()方法的区别在于:
replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。

下面学习如何在页面跳转的时候进行值的传递,当使用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附加字段在页面跳转间传值,前面用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文件,下一个页面访问的时候,直接读取这里面的值就OK了。
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多