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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
js计数器代码
2006/11/04 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python处理html转义字符的方法详解
2016/07/01 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python将string转换到float的实例方法
2019/07/29 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
上课玩手机检讨书
2014/02/08 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
师范生见习报告范文
2014/11/03 职场文书
会议主持词结束语
2015/07/03 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL