我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript之BOM location对象+navigator对象+history 对象

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript之BOM location对象+navigator对象+history 对象

前言:

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
接下来我们就具体的看一下。

一、location对象

1、URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为:

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2、location 对象的属性

我们可以通过这些属性得到地址栏中对应的信息,举个例子:

比如:在csdn首页,打开我们的开发者工具–>控制台,输入location,就会出现location对象的很多属性和返回值:

或者我们直接在控制台输入对应的属性,就可以拿到对应的返回值。

比如我们现在做一个点击按钮跳转页面的效果:


<body>
    <button>跳转</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        btn.addEventListener('click',function(){
           time()
        })

       var time = setInterval(function(){
            if(timer == 0) {
                this.location.href = 'https://www.baidu.com'
            }
           else{
                div.innerHTML = '页面将在'+timer+'秒后跳转'
                timer--;
           }
        },1000);
       
    </script>
</body>

运行结果为:

3、location 对象的方法

例如,我们也可以通过使用location对象方法来实现跳转页面:


 <button>点击跳转</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            location.assign('https://www.baidu.com')
        })
    </script>

location.assign() 这种方法实现的跳转是可以后退页面,但是 location.replace() 因为不记录历史,所以不能后退页面。

二、navigator对象

navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。


if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

三、history对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。

它最常用的方法有以下三个:

history对象方法作用
back()可以后退功能
forward()前进功能
go(参数)前进后退功能 参数如果是1,前进一个页面 如果是-1 后退一个页面

比如我们现在有连个页面,想要通过一个按钮实现前进后退功能,可以分别给两个页面的按钮绑定forward方法和history方法,如下所示:


<body>
    <a href="list.html" rel="external nofollow" >去到列表页面</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            history.forward()
        })
    </script>
</body>


<body>
    <a href="index.html" rel="external nofollow" >返回主页面</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
        history.back()
    })
    </script>
</body>

实现效果为:

或者我们也可以使用history.go(1)实现前进功能;用history.go(1)实现后退功能。

到此这篇关于JavaScript之BOM location对象+navigator对象+history 对象的文章就介绍到这了,更多相关 location对象+navigator对象+history 对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript之BOM location对象+navigator对象+history 对象

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Navigator对象

检测浏览器的版本、所支持的MIME类型、已安装的外挂程序(plug-in)。该对象包含两个子对象:外挂对象和MIME类型对象。 是Javascript中常用对象,可以实现与HTML文档进行交互,它将相关元素封装起来,从而使开发web应用程序
2023-06-03

BOM中location对象的属性和方法

这篇文章主要介绍了BOM中location对象的属性和方法,作为前端基础location对象的属性方法还是要掌握的,需要的朋友可以参考下
2023-05-14

JavaScript之Style对象与CurrentStyle对象

在JavaScript中,可以通过Style对象和CurrentStyle对象来获取和设置HTML元素的样式属性。Style对象是DOM中元素的一个属性,它包含了元素的内联样式属性。通过Style对象,可以直接读取或设置元素的样式属性。例如
2023-09-14

JavaScript history对象举例分析

这篇文章主要介绍“JavaScript history对象举例分析”,在日常操作中,相信很多人在JavaScript history对象举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScrip
2023-06-21

BOM 中的 location 对象:操纵浏览器地址栏

location 对象是浏览器中一个重要的工具,它允许您操纵浏览器地址栏中的 URL,提供了一种更改当前网页位置的方式,并且可以在网页中进行操作。
BOM 中的 location 对象:操纵浏览器地址栏
2024-02-21

BOM中location对象的属性和方法是什么

这篇文章主要介绍了BOM中location对象的属性和方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇BOM中location对象的属性和方法是什么文章都会有所收获,下面我们一起来看看吧。一、locat
2023-07-05

如何将JavaScript对象转成jQuery对象数组对象

JavaScript 是一种高级的动态编程语言,非常流行。它使得网页在不需要刷新页面的情况下变得更加动态和交互性。然而,当 JavaScript 开发变得越来越复杂,常常需要处理大量的 HTML 元素,这时候就需要用到 jQuery。jQuery 是 JavaScript 库的一种,它为 JavaScript 开发提供了一个简洁易用的接口。在 jQuery 中,一个或多个 HT
2023-05-14

javascript中的History对象如何使用

这篇文章主要介绍“javascript中的History对象如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中的History对象如何使用”文章能帮助大家解决问题。leng
2023-06-17

BOM 中的 history 对象:控制浏览历史记录

history 对象是 BOM 中的一个重要对象,它允许 JavaScript 脚本管理浏览历史记录,实现前进、后退和刷新等功能。掌握 history 对象的使用技巧,可以大大提升 Web 应用程序的用户体验。
BOM 中的 history 对象:控制浏览历史记录
2024-02-21

javascript中常见的bom对象有哪些

这篇文章主要介绍javascript中常见的bom对象有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript
2023-06-14

编程热搜

目录