博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于location.href几种用法的区别
阅读量:6849 次
发布时间:2019-06-26

本文共 1541 字,大约阅读时间需要 5 分钟。

常见的几种开发形式:

self.location.href;window.location.href;this.location.href;location.href;parent.location.href;top.location.href;

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

通过实际的例子讲解以上的几种形式有什么具体的区别:

总共是4个具体的HTML页面:

a.html

  这是a.html页面 
这是a.html页面

 

b.html

  这是b.html 
这是b.html

 

c.html

  这是c.html 
这是c.html:

 

d.html

  这是d.html 
这是d.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"是上一层页面跳转.

 

本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/4390842.html,如需转载请自行联系原作者

你可能感兴趣的文章
提高你的编码速度–Eclipse 快捷健
查看>>
Linux下自动备份Oracle数据库并删除指定天数前的备份
查看>>
如何找回从垃圾箱删除的邮件Outlook2010,2013
查看>>
我的友情链接
查看>>
BGP-4的多协议扩展MP-BGP
查看>>
Nginx+Tomcat+Memcached实现tomcat集群和session共享
查看>>
rhel6+nginx+php+php-fpm 防火墙配置问题
查看>>
CreateOleObject dll 卡死 问题 原因
查看>>
RAD Studio Static Runtime Libraries c++builder去掉依赖cc3260mt
查看>>
话里话外:BPM软件能否成为流程管理的终结者?
查看>>
“我来管管看”系列:采购误差缘何而来?
查看>>
我的友情链接
查看>>
smooth
查看>>
主流开发语言和开发环境
查看>>
docker常用命令
查看>>
恢复2003默认组策略
查看>>
XenServer 审核日志 xe CLI 命令
查看>>
MongoDB数据库基本用法
查看>>
解决:yum安装软件包Transaction Check Error错误
查看>>
关于iSCSI的一些介绍
查看>>