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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JavaScript实现随机点名小程序
Oct 29 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
法律进学校实施方案
2014/03/15 职场文书
学前班评语大全
2014/05/04 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
人事文员岗位职责
2015/02/04 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android