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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于Vue实现电商SKU组合算法问题
May 29 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
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
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php提交post数组参数实例分析
2015/12/17 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python模拟登陆实现代码
2017/06/14 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
解决python运行效率不高的问题
2020/07/20 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
销售总监岗位职责
2014/01/04 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
应急处置方案
2014/06/16 职场文书
文员求职信
2014/07/15 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
学年个人总结范文
2015/03/05 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
七年级作文之下雨天
2019/12/23 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python