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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
WEB前端性能优化的7大手段详解
Feb 04 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python中title()方法的使用简介
2015/05/20 Python
Python实现二叉堆
2016/02/03 Python
python中使用print输出中文的方法
2018/07/16 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
感恩寄语大全
2014/04/11 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang