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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
javascript 解析url的search方法
Feb 09 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
React key值的作用和使用详解
Aug 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仿ZOL分页类代码
2008/10/02 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
浅谈Python中数据解析
2015/05/05 Python
python类和继承用法实例
2015/07/07 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python threading的使用方法解析
2019/08/28 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python中数字是否为可变类型
2020/07/08 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
实习生求职自荐信
2014/02/07 职场文书
房屋委托书范本
2014/04/04 职场文书
捐书倡议书
2014/08/29 职场文书
新员工入职欢迎词
2015/01/23 职场文书
企业法人代表证明书
2015/06/18 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js