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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
给js文件传参数(详解)
Jul 13 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
小程序实现分类页
Jul 12 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
javascript新手语法小结
2008/06/15 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python中的高级数据结构详解
2015/03/27 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python中SQLite如何使用
2020/05/27 Python
Python自省及反射原理实例详解
2020/07/06 Python
python属于哪种语言
2020/08/16 Python
COS美国官网:知名服装品牌
2019/04/08 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
酒店仓管员岗位职责
2014/04/28 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
简单租房协议书
2014/10/21 职场文书
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers