详解js location.href和window.open的几种用法和区别


Posted in Javascript onDecember 02, 2019

一、location.href常见的几种形式

  1. self.location.href;//当前页面打开URL页面
  2. window.location.href;//当前页面打开URL页面
  3. this.location.href;//当前页面打开URL页面
  4. location.href;// 当前页面打开URL页面
  5. parent.location.href;//在父页面打开新页面
  6. top.location.href;//在顶层页面打开新页面

①如果页面中自定义了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提交数据.

③用window.open()打开新页面
但是用window.location.href="" 却是在原窗口打开的.
有时浏览器会一些安全设置window.open肯定被屏蔽。例如避免弹出广告窗口。

二、location.href不同形式之间的区别

a.html:

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

b.html:

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

c.html:

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

d.html:

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

详解js location.href和window.open的几种用法和区别

a.html里面嵌着b.html;
b.html里面嵌着c.html;
c.html里面嵌着d.html

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

function jump()
{
//经测试:window.location.href与location.href,self.location.href,location.href都是本页面跳转
//作用一样
window.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
//location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
//self.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
//this.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
//location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
}

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

详解js location.href和window.open的几种用法和区别

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

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

function jump()
{
parent.location.href='http://www.baidu.com';
}

详解js location.href和window.open的几种用法和区别

分析:我点击的是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后,再次点击"跳转" 按钮,

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

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

三、location.href总结

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

"top.location.href"是最外层的页面跳转
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转.

location是window对象的属性,而所有的网页下的对象都是属于window作用域链中(这是顶级作用域),所以使用时是可以省略window。而top是指向顶级窗口对象,parent是指向父级窗口对象。

四、window.location.href和window.open的区别

window.location是window对象的属性,而window.open是window对象的方法
window.location是你对当前浏览器窗口的URL地址对象的参考!
window.open是用来打开一个新窗口的函数!

window.open不一定是打开一个新窗口!!!!!!!!  
只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换,用这个特性的话可以在iframe和frame中来代替location.href。 
如<iframe name="aa"></iframe>  
 <input type=button  onclick="window.open('1.htm','aa','')">和  
 <input type=button  
  onclick="self.frames['aa'].location.href='1.htm'">的效果一样

在给按钮、表格、单元格、下拉列表和DIV等做链接时一般都要用Javascript来完成,和做普通链接一样,可能我们需要让链接页面在当前窗口打开,也可能需要在新窗口打开,这时我们就可以使用下面两项之一来完成:

window.open 用来打开新窗口 
window.location 用来替换当前页,也就是重新定位当前页 
  可以用以下来个实例来测试一下。 
<input type="button" value="新窗口打开" onclick="window.open('http://www.google.com')"> 
<input type="button" value="当前页打开" onclick="window.location='http://www.google.com/'">

window.location或window.open如何指定target?
这是一个经常遇到的问题,特别是在用frame框架的时候
解决办法:

window.location 改为 top.location 即可在顶部链接到指定页

window.open("你的网址","_top");

5、window.open 用来打开新窗口
window.location 用来替换当前页,也就是重新定位当前页

用户不能改变document.location(因为这是当前显示文档的位置)。
window.location本身也是一个对象。

但是,可以用window.location改变当前文档 (用其它文档取代当前文档),而document.location不是对象。
服务器重定向后有可能使document.url变动,但window.location.href指的永远是访问该网页时用的URL.
大多数情况下,document.location和location.href是相同的,但是,当存在服务器重定向时,document.location包含的是已经装载的URL,而location.href包含的则是原始请求的文档的URL.

6、window.open()是可以在一个网站上打开另外的一个网站的地址
window.location()是只能在一个网站中打开本网站的网页

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
You might like
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
浅谈function(函数)中的动态参数
2017/04/30 Python
Anaconda入门使用总结
2018/04/05 Python
Python Pillow Image Invert
2019/01/22 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
个人自我剖析材料
2014/02/07 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2014年妇联工作总结
2014/11/21 职场文书
化验员岗位职责
2015/02/14 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL