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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript屏蔽右键代码
May 15 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
require.js中的define函数详解
Jul 10 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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
改造一台复古桌面收音机
2021/03/02 无线电
php 获取全局变量的代码
2011/04/21 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Django CBV类的用法详解
2019/07/26 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python3让print输出不换行的方法
2020/08/24 Python
如何使用Python调整图像大小
2020/09/26 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
中医专业应届生求职信
2013/11/17 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
校长新学期致辞
2015/07/30 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Python Pandas 删除列操作
2022/03/16 Python
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技