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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python实现代码统计器
2019/09/19 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Keras设置以及获取权重的实现
2020/06/19 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
《云房子》教学反思
2014/04/20 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
医学检验专业自荐信
2014/09/18 职场文书
庆祝教师节标语
2014/10/09 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL