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

2024-10-03 08:09:13

一、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 对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript history 对象详解

目录 1.路由导航 2.历史状态管理API (1)hashchange 事件 (2)popstate 事件 (3)history.pushState() 方法 (4)history.replaceState()方法 3.补充:URL的hash 前言: 我们浏览一个网页时可能不太会注意网页前进后退这些操作,但是在开发时你是否想过页面之间的跳转经历了什么,浏览器时怎么保存的页面信息,重新返回上一个页面的时候是否需要重新加载页面呢,会有很对疑问,要想解决这些问题,首先需要知道浏览器中的window下的
javascript History对象原理解析

这篇文章主要介绍了javascript History对象原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 length history.length属性保存着历史记录的URL数量.初始时,该值为1.由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用跳转方法 go().back()和forward() 如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败 [注意]使用历史记录时,页面通常从浏览器缓存之
JavaScript之BOM构成和常用事件详解

目录一.BOM 2.BOM的构成二.window对象的常用事件 1.窗口加载事件 2.调整窗口大小事件总结一.BOM 1.什么是BOM? BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window. BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性. BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览
使用JS location实现搜索框历史记录功能

首先,来看下效果图(样式什么的就不必吐槽了哈) html代码 <form id="hisform"> <div id="searchbox"> <input id="inpt" type="text" autocomplete="off" /> <input id="btn" type="button" value="
JavaScript navigator.userAgent获取浏览器信息案例讲解

浏览器对于我们来说,可能是最熟悉的工具了.熟知的浏览器Firefox.Opera.Safari.IE.Chrome以外,据说世界上还有近百种浏览器.通常在开发的时候要做到兼容各种浏览器,因此提炼出判断浏览器类型及系统是很重要的. 先来看看什么是User-Agent?User-Agent是HTTP请求中的用户标识,一般发送一个能够代表客户端类型的字符串,比如浏览器类型操作系统等信息.User-Agent 的约定格式是:应用名,跟一个斜线,跟版本号,剩下的是自由的格式. 此处我只实例展示几个浏览器
JavaScript中BOM和DOM详解

目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法,封装工具 BOM(浏览器对象模型)
JavaScript之BOM location对象+navigator对象+history 对象

目录一.location对象 1.URL 2.location 对象的属性 3.location 对象的方法二.navigator对象三.history对象前言: window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL . 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象.接下来我们就具体的看一下. 一.location对象 1.URL 统一资源定位符 (Uniform Resource Locato
JavaScript中BOM,DOM和事件的用法详解

目录 BOM 概念对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分核心DOM模型 HTML DOM 事件监听机制概念常见的事件事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo
JavaScript编程中window的location与history对象详解

Window Location window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. window.location 对象在编写时可不使用 window 这个前缀. 一些例子: 一些实例: location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协
JavaScript中BOM对象原理与用法分析

本文实例讲述了JavaScript中BOM对象原理与用法.分享给大家供大家参考,具体如下: 百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 我的理解博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScrip
javascript history对象详解

前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor
你真的了解BOM中的history对象吗

前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor
Javascript之BOM(window对象)详解

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变
javascript history对象(历史记录)使用方法(实现浏览器前进后退)

window.history对象在编写时可不使用 window 这个前缀.为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制. 方法: history.back() - 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的实例: 复制代码代码如下: <html><button name="back" value="后退&