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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
Vue SSR 组件加载问题
May 02 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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代码
2007/03/03 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
sina的lightbox效果。
2007/01/09 Javascript
javascript json2 使用方法
2010/03/16 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
Vue实现简易计算器
2020/02/25 Javascript
Python单例模式的两种实现方法
2017/08/14 Python
Python中按键来获取指定的值
2019/03/02 Python
python仿抖音表白神器
2019/04/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
python Timer 类使用介绍
2020/12/28 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
戴尔美国官网:Dell
2016/08/31 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
2014年小学教学工作总结
2014/11/13 职场文书
小班教师个人总结
2015/02/05 职场文书
2015年司机工作总结
2015/04/23 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis