关于location.href几种用法的区别
常见的几种开发形式:
self.location.href;
window.location.href;
this.location.href;
location.href;
parent.location.href;
top.location.href;
经常见到的大概有以上几种形式.
通过实际的例子讲解以上的几种形式有什么具体的区别:
总共是4个具体的HTML页面:
a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>这是a.html页面</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<form id="form1" action="">
<div><strong>这是a.html页面<strong>
<iframe src="b.html" width="500px" height="300px"></iframe> </strong></strong></div>
</form>
</body>
</html>
b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>这是b.html</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<span>这是b.html</span><span id="span1"></span><br />
<iframe src="c.html" width="500px" height="300px"></iframe>
</body>
</html>
c.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>这是c.html</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<span><strong>这是c.html：<strong></span><span id="span1"></span><br />
<iframe src="d.html" width="500px" height="300px"></iframe>
</body>
</html>
d.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>这是d.html</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript">
function jump(){
*********
}
</script>
</head>
<body>
<span>这是d.html：</span><span id="span1"></span><br />
<input type='button' onclick='jump();' value='跳转'>
<iframe src="d.html" width="500px" height="300px"></iframe>
</body>
</html>
打开a.html对应的截图如下:
下面再d.html中写入对应的js代码,看各种跳转是什么样的效果:
function jump(){
//经测试：window.location.href与location.href,self.location.href,location.href都是本页面跳转
//作用一样
window.location.href="http://www.baidu.com";
//location.href="http://www.baidu.com";
//self.location.href="http://www.baidu.com";
//his.location.href="http://www.baidu.com";
//location.href="http://www.baidu.com";
}
再次运行a.html,点击那个"跳转" 按钮，运行结果贴图二如下：
对比图一和图二的变化，你会发现d.html部分已经跳转到了百度的首页，而其它地方没有发生变化。这也就解释了"本页跳转"是什么意思。
好，再来修改d.html里面的js部分为：
function jump(){
parent.location.href='http://www.baidu.com';
}
显示效果如下:
你会发现a.html中嵌套的c.html部分已经跳转到了百度首页。
分析：我点击的是a.html中嵌套的d.html部分的跳转按钮，结果是a.html中嵌套的c.html部分跳转到了百度首页，这就解释了"parent.location.href是上一层页面跳转"的意思。
再次修改d.html里面的js部分为：
function jump(){
top.location.href='http://www.baidu.com';
}
显示效果如下:
分析：我点击的是a.html中嵌套的d.html部分的跳转按钮，结果是a.html中跳转到了百度首页，这就解释了"top.location.href是最外层的页面跳转"的意思。
总结:
看完上面的讲解之后，在来看看下面的定义你就会非常明白了：
"top.location.href"是最外层的页面跳转
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转.
关于location.href几种用法的区别的更多相关文章
- Html A标签中 href 和 onclick用法、区别、优先级别
原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). ...
- location和location.href跳转url的区别
使用 location = url 跳转,如果本地之前已经载入过该页面并有缓存,那么会直接读取本地的缓存,缓存机制是由本地浏览器设置决定的.状态码为: 200 OK (from cache) . ...
- window.location.href 与 window.loaction.replace区别
window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...
- window.location.href和document.location.href、document.URL的区别
1.document表示的是一个文档对象,window表示的是一个窗口对象,一个窗口下可以有多个文档对象. 所以一个窗口下只有一个window.location.href,但是可能有多个documen ...
- location.replace()和location.href=进行跳转的区别
location.href 通常被用来跳转到指定页面地址;location.replace 方法则可以实现用新的文档替换当前文档;location.replace 方法不会在 history 对象中生 ...
- 【转】Java中super和this的几种用法与区别
1. 子类的构造函数如果要引用super的话,必须把super放在函数的首位. class Base { Base() { System.out.println("Base&qu ...
- A标签中 href 和 onclick用法、区别、优先级别
(内容摘自:https://blog.csdn.net/chenchunlin526/article/details/77346049) Html A标签中 href 和 onclick 同时使用的问 ...
- window.location.href和window.open的几种用法和区别
使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 一.location.href ...
- js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...
随机推荐
- 微软企业库5.0学习-Security.Cryptography模块
一.微软企业库加密应用模块提供了两种加密: 1.Hash providers :离散加密,即数据加密后无法解密 2.Symmetric Cryptography Providers:密钥(对称)加密法 ...
- 转载IEnumerable与IEnumerator区别
public interface IEnumerable { IEnumerator GetEnumerator(); } public interface IEnumerator { ...
- HDU 2045 不容易系列之(3)—— LELE的RPG难题 （递推）
题意:略. 析:首先是假设前n-2个已经放好了,那么放第 n 个时,先考虑一下第 n-1 放的是什么,那么有两种情况. 如果n-1放的是和第1个一样的,那么第 n 个就可以在n-2的基础上放2个,也就 ...
- FORTRAN程序设计权威指南
<FORTRAN程序设计权威指南> 基本信息 作者: 白海波 出版社:机械工业出版社 ISBN:9787111421146 上架时间:2013-7-23 出版日期:2013 年7月 ...
- CSS 的 appearance 属性
在 Firefox 1.0+,Chrome 1.0+ 和 Safari 3.0+ 中,我们可以使用 -moz-appearance 或者 -webkit-appearance 属性让元素模仿系统原生控 ...
- ecshop收货人信息中修改手机号为必填
Ecshop 修改收货人信息 把电话改成选择填写 手机改为必填 (加强版) 1. 编辑根目录/js/utils.js 增加手机号码的正则表达式 参照Utils.isTel = function ( ...
- 发布方配ASP.NET网站服务器
方配ASP.NET网站服务器是一款简单,轻量,灵活的ASP.NET网站服务器,使用它可以无需安装复杂的IIS,直接就可以运行ASP.NET网站,使用非常简单,把exe文件拷贝到ASP.NET的网站目录 ...
- DuiLib（三）——控件消息
上一篇讲了控件创建,这篇说说控件消息.directui的中心思想是在真实窗口之上画出所有控件,那这些控件是如何获取各自消息的? 通过第一篇的示例可以看到窗口消息的传递过程: CWindowWnd::_ ...
- androidstudio构建(或导入)工程（不用gradle）
获取源代码: ---assets ---libs ---res ---src 先备份AndroidManifest.xml,然后工程中只保留这四个文件夹,其他文件删除, 然后在studio中导入工程, ...
- 【剑指offer】近期公共祖先
转载请注明出处:http://blog.csdn.net/ns_code/article/details/28113959 剑指offer上的最后一题了,一个递归函数调了一下午,才得到正确的结果. 题 ...