详解location.href几种用法的区别【JS跳转】


一:提出问题

使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了。

二:常见的几种形式

目前在开发中经常要用到的几种形式有:

1 self.location.href;
2 window.location.href;
3 this.location.href;
4 location.href;
5 parent.location.href;
6 top.location.href;                                            

经常见到的大概有以上几种形式。

三:代码部分

那么,这几种形式的跳转究竟有什么区别呢?

直接讲定义,你肯定不会理解透彻,下面我来贴四个html代码,用实际的例子讲解。

a.html:

1 <form id="form1" action="">
2 <div><strong>这是a.html页面<strong>
3 <iframe src="b.html" width="500px" height="300px"></iframe> </strong></strong></div>
4 </form>
5 <pre>

b.html:

1 <span>这是b.html</span><span id="span1"></span><br />
2 <iframe src="c.html" width="500px" height="300px"></iframe>

c.html:

1 <span><strong>这是c.html:<strong></span><span id="span1"></span><br />
2 <iframe src="d.html" width="500px" height="300px"></iframe>

d.html:

1 <span>这是d.html:</span><span id="span1"></span><br />
2 <input type=‘button‘ onclick=‘jump();‘ value=‘跳转‘>
3 <iframe src="d.html" width="500px" height="300px"></iframe>

a.html,b.html,c.html,d.html通过iframe给联系到了一起,那么它们有什么的联系呢?

观察代码,我们可以看出:

a.html里面嵌着b.html;

b.html里面嵌着c.html;

c.html里面嵌着d.html

运行a.html,贴图一如下:

四:测试几种用法

下面来测试上述几种写法.

在d.html里面head部分写js:

01 <strong>function jump()
02 {
03 //经测试:window.location.href与location.href,self.location.href,location.href都是本页面跳转
04 //作用一样
05 window.location.href="http://www.baidu.com";
06 //location.href="http://www.baidu.com";
07 //self.location.href="http://www.baidu.com";
08 //this.location.href="http://www.baidu.com";
09 //location.href="http://www.baidu.com";
10 } </strong>

再次运行a.html,点击那个"跳转" 按钮,运行结果贴图二如下:

对比图一和图二的变化,你会发现d.html部分已经跳转到了百度的首页,而其它地方没有发生变化。这也就解释了"本页跳转"是什么意思。

好,再来修改d.html里面的js部分为:

1 function jump()
2 {
3 parent.location.href=‘http://www.baidu.com‘;
4 }

运行a.html后,再次点击"跳转" 按钮,运行结果贴图三如下:

对比图一和图三,你会发现a.html中嵌套的c.html部分已经跳转到了百度首页。

分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中嵌套的c.html部分跳转到了百度首页,这就解释了"parent.location.href是上一层页面跳转"的意思。

再次修改d.html里面的js部分为:

1 function jump()
2 {
3 top.location.href=‘http://www.baidu.com‘;
4 }

运行a.html后,再次点击"跳转" 按钮,

你会发现,a.html已经跳转到了百度首页。

分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中跳转到了百度首页,这就解释了"top.location.href是最外层的页面跳转"的意思。

五:总结

看完上面的讲解之后,在来看看下面的定义你就会非常明白了:

"top.location.href"是最外层的页面跳转

"window.location.href"、"location.href"是本页面跳转

"parent.location.href"是上一层页面跳转.

一:提出问题

使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了。

二:常见的几种形式

目前在开发中经常要用到的几种形式有:

1 self.location.href;
2 window.location.href;
3 this.location.href;
4 location.href;
5 parent.location.href;
6 top.location.href;                                            

经常见到的大概有以上几种形式。

三:代码部分

那么,这几种形式的跳转究竟有什么区别呢?

直接讲定义,你肯定不会理解透彻,下面我来贴四个html代码,用实际的例子讲解。

a.html:

1 <form id="form1" action="">
2 <div><strong>这是a.html页面<strong>
3 <iframe src="b.html" width="500px" height="300px"></iframe> </strong></strong></div>
4 </form>
5 <pre>

b.html:

1 <span>这是b.html</span><span id="span1"></span><br />
2 <iframe src="c.html" width="500px" height="300px"></iframe>

c.html:

1 <span><strong>这是c.html:<strong></span><span id="span1"></span><br />
2 <iframe src="d.html" width="500px" height="300px"></iframe>

d.html:

1 <span>这是d.html:</span><span id="span1"></span><br />
2 <input type=‘button‘ onclick=‘jump();‘ value=‘跳转‘>
3 <iframe src="d.html" width="500px" height="300px"></iframe>

a.html,b.html,c.html,d.html通过iframe给联系到了一起,那么它们有什么的联系呢?

观察代码,我们可以看出:

a.html里面嵌着b.html;

b.html里面嵌着c.html;

c.html里面嵌着d.html

运行a.html,贴图一如下:

四:测试几种用法

下面来测试上述几种写法.

在d.html里面head部分写js:

01 <strong>function jump()
02 {
03 //经测试:window.location.href与location.href,self.location.href,location.href都是本页面跳转
04 //作用一样
05 window.location.href="http://www.baidu.com";
06 //location.href="http://www.baidu.com";
07 //self.location.href="http://www.baidu.com";
08 //this.location.href="http://www.baidu.com";
09 //location.href="http://www.baidu.com";
10 } </strong>

再次运行a.html,点击那个"跳转" 按钮,运行结果贴图二如下:

对比图一和图二的变化,你会发现d.html部分已经跳转到了百度的首页,而其它地方没有发生变化。这也就解释了"本页跳转"是什么意思。

好,再来修改d.html里面的js部分为:

1 function jump()
2 {
3 parent.location.href=‘http://www.baidu.com‘;
4 }

运行a.html后,再次点击"跳转" 按钮,运行结果贴图三如下:

对比图一和图三,你会发现a.html中嵌套的c.html部分已经跳转到了百度首页。

分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中嵌套的c.html部分跳转到了百度首页,这就解释了"parent.location.href是上一层页面跳转"的意思。

再次修改d.html里面的js部分为:

1 function jump()
2 {
3 top.location.href=‘http://www.baidu.com‘;
4 }

运行a.html后,再次点击"跳转" 按钮,

你会发现,a.html已经跳转到了百度首页。

分析:我点击的是a.html中嵌套的d.html部分的跳转按钮,结果是a.html中跳转到了百度首页,这就解释了"top.location.href是最外层的页面跳转"的意思。

五:总结

看完上面的讲解之后,在来看看下面的定义你就会非常明白了:

"top.location.href"是最外层的页面跳转

"window.location.href"、"location.href"是本页面跳转

"parent.location.href"是上一层页面跳转.

首先贴出来网上找的demo,在和小明做的如果·微营销的过程中,要修改一个后台模板,

    <frameset border=0 framespacing=0 rows="60, *" frameborder=0>
        <frame name=head src="./head.html" frameborder=0 noresize scrolling=no>
            <frameset cols="170, *">
                <frame name=left src="./left.html" frameborder=0 noresize />
                <frame name=right src="./right.html" frameborder=0 noresize scrolling=yes />
            </frameset>
    </frameset>
    <noframes>
    </noframes>

后台代码是这个样子,然后在left.html里面的一个a链接跳转到另一个php页面,结果直接在frame里面跳转,其他的frame没有变化,因此百度了一下,发现默认的当前框架跳转,因此

<a href="javascript:toAdd();">添加商品</a>
function toAdd(){
<span style="white-space:pre">	top.location.href= "add.html";</span>
}

就得到了想要的效果。

时间: 2024-10-21 15:34:53

详解location.href几种用法的区别【JS跳转】的相关文章

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

详解CSS中:nth-child的用法_大前端

http://www.daqianduan.com/3737.html 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#0

微信公众平台认证步骤详解及服务号和订阅号区别

微信公众号对象: 企业.媒体.以及公益.社区等组织.机构. 微信公众号作用: 通过微信公众渠道将品牌推广给上亿或者更多的微信用户. 1.极快的传播速度.极少的宣传成本: 2.提高品牌知名度,打造更具影响力的品牌形象. 3.危机公关(越来越需要) 微信公众号怎样认证: 一般企业或个人通过认证除了看努力还得看天意,当然也可以联系一些认证机构去办理相对要简单些.虽然微信公众号的口号是"再小的个体,也有自己品牌",但个体的力量毕竟不如团队的力量-- 认证条件: 1.微信公众号认证需要在业内有一

详解HTTP中get和post的区别

1.详解HTTP中GET和POST的区别 http://www.jellythink.com/archives/806 2.HTTP 方法:GET 对比 POST http://www.cnblogs.com/liu-ke/p/4198815.html

详解多线程MT和多线程MD的区别

这段时间司在招实习生,而不管是远程的电话面试或者是实际现场面试中领导都喜欢问你这个问题,但是可惜的是能很好答上来的人很少.后来发现不管是应届的实习生,甚至有些实际参加工作几年的人也未必真的了解这个问题.今天想写一篇详解,希望对广大程序员有一定的帮助. 区别1:全局堆句柄不一样. 网上有一个说法,就是一个线程一个栈,一个模块一个堆.前者很容易有理解,每个线程创建的时候在CreateThread中都能制定默认栈大小,只是很多情况下都取了默认值.而一个模块一个堆呢?其实很简单测试,如果是一个多线程MT

Html A标签中 href 和 onclick用法、区别、优先级别

原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题).  代码如下 复制代码 <a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值. 所以,比较推荐的写法是  代码如下 复制代

轻松搞定高并发:详解Redis的五种数据类型及应用场景分析!

一.Redis基本概念介绍和特性 1.1 Redis基本概念介绍 1.Redis是远程的,有客户端和服务端,我们一般说的是服务端: 2.Redis是基于内存的,所以比基于硬盘的MySQL要快很多,但非常吃内存 3.Redis是非关系型数据库.本质上也是数据库,但MySQL关系型数据库存储时必须定义数据词典,而Redis则不需要. 1.2 Redis 和 Memcached比较 Redis数据类型都支持push/pop.add/remove及取交集并集和差集及更丰富的操作,而且这些操作都是原子性的

Android入门——Fragment详解之基本概念与用法(一)

引言 Android在3.0中引入了Fragments的概念,其目的是用在大屏幕设备上–例如平板电脑上,支持更加动态和灵活的UI设计.平板电脑的屏幕要比手机的大得多,有更多的空间来放更多的UI组件,并且这些组件之间会产生更多的交互.Fragment允许这样的一种设计,而不需要你亲自来管理 Viewhierarchy的复杂变化. 通过将Activity的布局分散到Fragment中, 你可以在运行时修改Activity的外观,并在由Activity管理的back stack中保存那些变化. 一.F

详解PHP中cookie和session的区别及cookie和session用法小结

cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域:如果cookie不设置生命周期,则以浏览器关闭而关闭,这种cookie一般存储在内存而不是硬盘上.若设置了生命周期则相反,不随浏览器的关闭而消失,这些cookie仍然有效直到超过设定的过 期 时间.session 一种类似散列表的形式保存信息,当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已