window.location.href的用法(动态输出跳转)


Posted in Javascript onAugust 09, 2014

javascript中的location.href有很多种用法,主要如下。

self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面

如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如:

Response.Write("< script>alert('恭喜您,注册成功!');< /script>");  

Response.Redirect("main.html");  

这时候我们的提示内容没有出来就跳转了,和Response.Redirect("main.html");没有任何区别。

这时我们采用下面代码试验一下:

ASP.NET框架页跳转的另一实现

Response.Write("< script language=javascript>alert('恭喜您,注册成功!')< /script>");  

Response.Write("< script language=javascript>window.location.href='main.html'< /script>");

这个即实现了我们的要求,在提示后,跳转页面。

最重要的是window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面(Response.Redirect无法达到,至少我没有发现):

如:index.htm页面中有二个框架,分别为 frameLeft和frameRight,在frameRight页面中执行服务器端代码后刷新frameLeft中的页面。

先前最常见的是注册之后,自动刷新登陆框,让登陆框换成已登陆页面,只要在注册成功的代码之后加上一段,即可以实现刷新另个框架的页面。代码如下:

Response.Write("< script language=javascript>alert('恭喜您,注册成功!')< /script>");  

Response.Write("< script language=javascript>window.parent.frameLeft.location.href='main.html'< /script>");  

这样就搞定了ASP.NET框架页跳转中断的问题。其实asp、php中一般都使用这种方式。

"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转

举例说明:

如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写

"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转

如果D页面中有form的话,

<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
<form target="_top"> : form提交后A页面跳转
 
关于页面刷新,D 页面中这样写:

"parent.location.reload();": C页面刷新 (当然,也可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); )

"top.location.reload();": A页面刷新

Javascript 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
javascript操作数组详解
Dec 17 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
javascript父、子页面交互技巧总结
Aug 08 #Javascript
jQuery的animate函数学习记录
Aug 08 #Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 #Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 #Javascript
js事件监听机制(事件捕获)总结
Aug 08 #Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 #Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 #Javascript
You might like
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Django websocket原理及功能实现代码
2020/11/14 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
银行会计财务工作个人的自我评价
2013/10/29 职场文书
网络程序员自荐信
2014/01/25 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
秘书英文求职信
2014/04/16 职场文书
设计大赛策划方案
2014/06/13 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
python异常中else的实例用法
2021/06/15 Python