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

最新推荐文章于 2022-01-14 01:15:55 发布

别Null.了

最新推荐文章于 2022-01-14 01:15:55 发布

阅读量117

点赞数 2

分类专栏： web学习文章标签： html5

本文链接：https://blog.csdn.net/TangJing_/article/details/118932458

版权

web学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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列表中的某个具体页面

别Null.了

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM（location对象，navigator对象，history对象）

BOM什么是BOMBOM：浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM构成
复制链接

扫一扫