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

Posted 2021-08-18 别Null.了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM（location对象，navigator对象，history对象）相关的知识，希望对你有一定的参考价值。

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>

输出为：

history对象

常用属性：history.length属性返回历史列表中的网址数。

history的常用方法

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面

以上是关于BOM（location对象，navigator对象，history对象）的主要内容，如果未能解决你的问题，请参考以下文章

BOM location对象navigator对象history对象

JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)

JavaScript之BOM五大对象(window;location;navigator;screen;history)

BOM对象

web前端练习29----Bom中，Navigator，loaction，history ，Screen，window及案例（滚动，刷新加载，传参）