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可突破windows弹退效果代码
Aug 09 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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中遍历二维数组的几种方法详解
2013/06/08 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
JS 控制CSS样式表
2009/08/20 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
JS实现页面打印功能
2017/03/16 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
空指针到底是什么
2012/08/07 面试题
党校培训自我鉴定范文
2014/03/20 职场文书
产假请假条
2014/04/10 职场文书
选秀节目策划方案
2014/06/06 职场文书
品牌转让协议书
2014/08/20 职场文书
公务员培的训心得体会
2014/09/01 职场文书
公司合作协议范文
2014/10/01 职场文书
挂靠协议书
2015/01/27 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书