BOM（location对象，navigator对象，history对象）

最新推荐文章于 2025-12-03 08:49:12 发布

原创最新推荐文章于 2025-12-03 08:49:12 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

web学习专栏收录该内容

13 篇文章

订阅专栏

本文概述了URL的组成部分，location对象的常用属性和方法，包括获取和修改URL参数，以及navigator和history对象的实用功能。通过实例展示了如何在JavaScript中操作这些浏览器对象来获取用户输入和管理历史记录。

location对象

URL的组成

各部分	说明
protocol	网络协议，常用的如http，ftp，mailto等
host	服务器的主机名，如www.example.com
port	端口号，可选，省略时使用协议的默认端口，如http默认端口为100
path	路径，如“/web/index.html”
query	参数，键值对的形式，通过“&”符号分隔，如“a=3&b=4”

location常用属性

属性	说明
location search	返回（或设置）当前URL的查询部分（“?”之后的部分）
location hash	返回一个URL的锚部分（从“#”开始的部分）
location host	返回一个URL的主机名和端口
location hostname	返回URL的主机名
location href	返回完整的URL
location pathname	返回URL的路径名
location port	返回一个URL服务器使用的端口号
location protocol	返回一个URL协议

location的常用方法

方法	说明
assign()	载入一个新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前记录

举例：获取URL参数

第一步：创建login.html登录界面

<body>
    <form action="index.html">  <!-- 运行错误，因为不存在此地址，需添加此页面 -->
        用户名：
        <input type="text" name="usename">
        <input type="submit" value="登录">
    </form>
</body>

第二步：创建index.html首页

<body>
    <div></div>

    <script>
        console.log(location.search)   //输出为?usename=abc
        //1、获取URL的参数
        var params = location.search.substr(1)  //去掉‘？’
        console.log(params)  //输出为usename=abc
    
        //2、将参数字符分割成数组
        var arr = params.split('=')
        console.log(arr[1])   //输出为abc
        var div = document.querySelector('div')
        div.innerHTML = arr[1]+'欢迎您！'
    </script>
</body>

代码实现

navigator对象

navigator的常用属性

属性	说明
appCodeName	返回浏览器的内部名称
appName	返回浏览器的完整名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用Cookie的布尔值
platform	返回运行浏览器的操作系统平台

navigator的常用方法：JavaEnabled() 指定是否在浏览器中启用Java。

举例：用navigator属性输出浏览器的信息

<script>
    console.log("内核："+navigator.appCodeName)
    console.log("名称："+navigator.appName)
    console.log("版本："+navigator.appVersion)
    console.log("cookie:"+navigator.cookieEnabled)  //输出为true
    console.log("操作核心系统平台："+navigator.platform)  //输出为win32
    console.log("历史记录数："+history.length)
</script>

输出为：