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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
javascript相关事件的几个概念
May 21 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
vue-model实现简易计算器
Aug 17 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
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python爬取某平台短视频的方法
2021/02/08 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
介绍一下write命令
2012/09/24 面试题
2015试用期转正工作总结
2014/12/12 职场文书
班主任高考寄语
2015/02/26 职场文书
青年联谊会致辞
2015/07/31 职场文书
公司财务管理制度
2015/08/04 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书