详解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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
JS隐藏号码中间4位代码实例
Apr 09 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
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php广告加载类用法实例
2014/09/23 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Angular弹出模态框的两种方式
2017/10/19 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python如何实现的二分查找算法
2020/05/27 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
三年级数学教学反思
2014/01/31 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Redis+AOP+自定义注解实现限流
2022/06/28 Redis