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中的constructor和prototype
Apr 07 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
了解JavaScript中let语句
May 30 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
详解Vue之计算属性
Jun 20 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
react ant Design手动设置表单的值操作
Oct 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
php flv视频时间获取函数
2010/06/29 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php中请求url的五种方法总结
2017/07/13 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
J2EE面试题大全
2016/08/06 面试题
优秀演讲稿范文
2013/12/29 职场文书
军训 自我鉴定
2014/02/03 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
丽江古城导游词
2015/02/03 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
离婚案件原告代理词
2015/05/23 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书