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自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
javascript的push使用指南
Dec 05 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 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实现图形显示Ip地址的代码及注释
2014/01/20 PHP
初识laravel5
2015/03/02 PHP
php和html的区别点详细总结
2019/09/24 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python 二维数组90度旋转的方法
2019/01/28 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
数学系毕业生求职信
2014/05/29 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python