javascript中window.location.href的用法

 更新时间:2025年04月26日 16:11:51   作者:网络真危险!!  
window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,本文就详细的介绍一下javascript中window.location.href的用法,感兴趣的可以了解一下

一、前言

window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,是 window.location 对象的属性。它返回一个字符串,表示当前页面的 URL;同时,当通过将 URL 指定给 window.location.href 时,可以让浏览器跳转到新的 URL。

二、常见用例

  • self.location.href="/url" 当前页面打开URL页面
  • location.href="/url :当前页面打开URL页面
  • window.location.href="/url" :当前页面打开URL页面,前面三个用法相同。
  • this.location.href="/url" :当前页面打开URL页面
  • parent.location.href="/url" :在父页面打开新页面
  • top.location.href="/url" :在顶层页面打开新页面
  • 如果页面中自定义了 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提交数据

  • 如果要关闭当前窗口,并且在新窗口打开某一链接
var a = document.createElement('a')
      a.setAttribute('href', href)
      a.setAttribute('target', '_blank')
      a.setAttribute('id', 'startTelMedicine')
      a.onclick = function () {
        //关闭窗口的方法
        window.opener = null
        window.open('', '_self', '')
        window.close()
      }
      // 防止反复添加
      if (document.getElementById('startTelMedicine')) {
        document.body.removeChild(document.getElementById('startTelMedicine'))
      }
      document.body.appendChild(a)
      a.click()
  • 如果无法关闭当前弹框 说明可能有父节点,可以试试:window.parent.close();

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

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

2、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'">

的效果一样 

3、在给按钮、表格、单元格、下拉列表和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/'"> 

4、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中window.location.href的用法   的文章就介绍到这了,更多相关javascript window.location.href内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于JavaScript的内存与性能问题解决汇总

    关于JavaScript的内存与性能问题解决汇总

    这篇文章主要介绍了关于JavaScript的内存与性能问题解决汇总,在JavaScript中,页面中事件处理程序的数量与页面整体性能直接相关,原因有很多,下面就一起来看看具体的总结吧
    2022-04-04
  • js时间戳转yyyy-MM-dd HH-mm-ss工具类详解

    js时间戳转yyyy-MM-dd HH-mm-ss工具类详解

    这篇文章主要介绍了js时间戳转yyyy-MM-dd HH-mm-ss工具类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • createElement动态创建HTML对象脚本代码

    createElement动态创建HTML对象脚本代码

    利用createElement动态创建链接,div等代码
    2008-11-11
  • JavaScript中prompt()函数的用法实战例子

    JavaScript中prompt()函数的用法实战例子

    JavaScript中的prompt是一个函数,用于在浏览器中显示一个对话框,提示用户输入一些信息,这篇文章主要给大家介绍了关于JavaScript中prompt()函数的用法实战,需要的朋友可以参考下
    2023-11-11
  • JS实现同时搜索百度和必应的方法

    JS实现同时搜索百度和必应的方法

    这篇文章主要介绍了JS实现同时搜索百度和必应的方法,可实现在底部的两个框架中同时显示两个搜索引擎的搜索结果,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 怎么判断js脚本加载完成

    怎么判断js脚本加载完成

    本篇文章主要是对判断js脚本加载完成的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • NestJS+TypeScript 全栈项目骨架配置实战

    NestJS+TypeScript 全栈项目骨架配置实战

    对前端转全栈来说,NestJS + TypeScript 是零语言切换成本、快速落地的最优解,本文就来详细的介绍一下NestJS+TypeScript 全栈项目骨架配置实战,感兴趣的可以了解一下
    2026-04-04
  • 实例分析JS与Node.js中的事件循环

    实例分析JS与Node.js中的事件循环

    本篇文章通过实例给大家详细分析了JS与Node.js中的事件的原理以及用法,大家学习一下吧。
    2017-12-12
  • 原生javascript AJAX 三级联动的实现代码

    原生javascript AJAX 三级联动的实现代码

    这篇文章主要介绍了原生javascript AJAX 三级联动的实现代码,非常不错代码简单易懂,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • laydate.js日期时间选择插件

    laydate.js日期时间选择插件

    这篇文章主要为大家详细介绍了laydate.js日期时间选择插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论