关于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>
<metahttp-equiv="content-type"content="text/html; charset=gb2312">
</head>
<body>
<formid="form1"action="">
<div><strong>这是a.html页面<strong>
<iframesrc="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>
<metahttp-equiv="content-type"content="text/html; charset=gb2312">
</head>
<body>
<span>这是b.html</span><spanid="span1"></span><br/>
<iframesrc="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>
<metahttp-equiv="content-type"content="text/html; charset=gb2312">
</head>
<body>
<span><strong>这是c.html：<strong></span><spanid="span1"></span><br/>
<iframesrc="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>
<metahttp-equiv="content-type"content="text/html; charset=gb2312">
<scripttype="text/javascript">functionjump(){*********}</script>
</head>
<body>
<span>这是d.html：</span><spanid="span1"></span><br/>
<inputtype='button'onclick='jump();'value='跳转'>
<iframesrc="d.html"width="500px"height="300px"></iframe>
</body>
</html>

打开a.html对应的截图如下:

下面再d.html中写入对应的js代码,看各种跳转是什么样的效果:

    functionjump(){//经测试：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部分为：

    functionjump(){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部分为：

    functionjump(){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"是上一层页面跳转.

转载于:https://www.cnblogs.com/DreamDrive/p/4390842.html

关于location.href几种用法的区别相关推荐

location和location.href跳转url的区别
使用 location = url 跳转,如果本地之前已经载入过该页面并有缓存,那么会直接读取本地的缓存,缓存机制是由本地浏览器设置决定的.状态码为: 200 OK (from cache) . ...
Html A标签中 href 和 onclick用法、区别、优先级别
http://gocom.primeton.com/blog21307_27051.htm 我以前在写<A>的href和onclick一直很随意,后来出过几次问题,以后才开始重视这个问题: ...
location.href和open的几种用法和区别
window.location.href和window.open的几种用法和区别一.location.href常见的几种形式二.location.href不同形式之间的区别三.location. ...
js获取当前域名、Url、相对路径和参数以及指定参数——下载文件-window.location.href
js获取当前域名.Url.相对路径和参数以及指定参数--下载文件-window.location.href 1.js获取当前域名有2种方法 //方法一 var domain = document.do ...
jsp中include 的两种用法
1.两种用法静态include: <%@ inlcude file ="header.jsp" %> 此时引入的是静态的jsp文件,它将引入的jsp中的源代码原封不动 ...
js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下首先我们了解一下:window.locat ...
location.href的几种用法
location.href 在js中,location.href经常用于页面跳转.它主要有如下几种用法: 1.在当前页面打开URL页面.需要注意的是window.location.href=windo ...
几种location.href的区别 js实现网页防止被iframe框架嵌套功能 .
首先我们了解一下:window.location.href.location.href.self.location.href.parent.location.href.top.location.hre ...
window.open和window.location.href的几种用法
windows.open("URL","窗口名称","窗口外观设定"); <A href="javascript:windo ...

关于location.href几种用法的区别

关于location.href几种用法的区别相关推荐

最新文章

热门文章