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


Posted in Javascript onMay 13, 2010

但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用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了。

Javascript 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
IE8下关于querySelectorAll()的问题
May 13 #Javascript
关于可运行代码无法正常执行的使用说明
May 13 #Javascript
jquery validate.js表单验证的基本用法入门
May 13 #Javascript
JQuery 选择器 xpath 语法应用
May 13 #Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 #Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 #Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 #Javascript
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
在PHP的图形函数中显示汉字
2006/10/09 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python中property函数用法实例分析
2018/06/04 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
HTML5标签小集
2011/08/02 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
DTD的含义以及作用
2014/01/26 面试题
在校大学生个人的自我评价
2014/02/13 职场文书
周年庆典主持词
2014/04/02 职场文书
企业新年寄语
2014/04/04 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
廉政承诺书范文
2015/04/28 职场文书
校长新学期寄语2016
2015/12/04 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript