15BOM编程艺术

BOM编程艺术

什么是BOM

BOM的全称为 Browser Object Model,被译为浏览器对象模型

BOM提供了独立于HTML页面内容,而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与测览器窗口之间通信等功能。

BOM由一系列对象构成,这些对象可以简单理解为是由各个览器所提供的,例如 Window对象等。

Window对象

全局作用域

  1. 在浏览器环境中运行javascript逻辑时,在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法。 var test = 666 console.log('test:', test) console.log('windows.test:', window.test) function t() { console.log('this is function') } t() window.t() delete window.test console.log('删除windwos.test后test的值:', test) console.log('删除windwos.test后windows.test的值:', window.test) delete test console.log('删除test后test的值:', test) console.log('删除test后windows.test的值:', window.test)
  1. 根据以上测试结果,可以很清楚的发现:删除是不起作用的。

https://antmoe.gitee.io/project/2020/05/12/01_window对象.html

浏览器窗口的宽度和高度

  • innerWidthinnerHeight属性 只读属性,返回当前浏览器窗口的可视宽度和高度。如果存在滚动条,也包含滚动条。
  • outterWidthoutterHeight属性 只读属性,返回当前浏览器窗口的整个宽度和高度。

https://antmoe.gitee.io/project/2020/05/12/02_图片跟随窗口变化.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <img id="img" src="https://ae01.alicdn.com/kf/H1d2dc39c58a84dc0960d4173b1bbc4643.jpg" alt="">
    <script>
        var img = document.getElementById('img')
        // resize表示重新设置大小
        window.addEventListener('resize', function () {
            console.log(window.innerWidth, window.innerHeight)
            img.style.width = window.innerWidth + 'px'
            img.style.height = window.innerHeight + 'px'
        })
    </script>
</body>

</html>

window.innerWidth等属性得值均为数字类型,作为宽度需加单位。例如window.innerWidth + 'px'

Windows对象与self属性

Window对象的self属性返回当前浏览器窗口的只读属性。换句话讲,Self属性返回的是 Window对象的引用。

if (window.top != window.self) {
    console.log('这个窗口不是最顶层窗口')
} else {
    console.log('这个窗口是最顶层窗口')
}

open和close

  • open[url] 参数参数打开地址。
  • close() 关闭当前页签

以上两个方法均是操作页签

https://antmoe.gitee.io/project/2020/05/12/03_打开与关闭浏览器窗口.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <button id="close">关闭</button>
    <script>
        var btn = document.getElementById('btn')
        var closebtn = document.getElementById('close')

        btn.addEventListener('click', function () {
            window.open('https://baidu.com')
        })
        closebtn.addEventListener('click', function () {
            window.close()
        })
    </script>
</body>

</html>

Navigator对象包含了一些有美浏览器状态的信息。可以通过window.navigator属性得到 Navigator对象。

https://antmoe.gitee.io/project/2020/05/12/04_navigator.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 以下属性均为只读属性
        console.log('浏览器的代码名:', navigator.appCodeName)
        console.log('浏览器的名称:', navigator.appName)
        console.log('浏览器的平台和版本信息:', navigator.appVersion)
        console.log('运行浏览器的操作系统平台:', navigator.platform)
        console.log('运行浏览器的userAgent:', navigator.userAgent)
        // 判断用户使用的平台
        var ua = navigator.userAgent
        if (/windows/i.test(ua)) {
            console.log('当前是Windows系统')
        } else if (/mac/i.test(ua)) {
            console.log('当前是mac操作系统')
        } else if (/android/i.test(ua)) {
            console.log('当前是android操作系统')
        } else if (/iphone/i.test(ua)) {
            console.log('当前是iphone操作系统')
        }
    </script>
</body>

</html>

History对象

History对象包含用户在测览器中访问过的URL(网址)。

  • length属性 History对象的length属性可以获取用户在浏览器中访问网址的数量。
  • 前进和后退功能 方法名称描述forward()实现跳转下一个页面,作用和浏览器的前进按钮一样back()实现跳转到上一个页面,作用和浏览器的回退按钮一样go()实现跳转到指定的页面。如果为负数表示后退,如果为正数表示前进

Location对象

Location对象包含了浏览器的地址栏中的信息,该对象主要用于获取和设置地址。 Location对象很特别,因为该对象既是 Window对象的属性,又是 Document对象的属性。

属性/方法名称

描述

host

返回服务器名称和端口号

hostname

返回服务器名称

href

返回当前加载页面的完整URL

pathname

返回当前URL中的目录和文件名

port

返回当前URL中的端口号

protocol

返回页面使用的网络协议

assign()

载入一个新的文档,作用和直接修改 Location相同

reload()

重新载入当前文档,作用和刷新按钮一样。参数为true时,则会强制清空缓存刷新页面

replace()

用新的文档替换当前文档(不会生成历史记录,不能使用回退按钮回退)

  1. 获取和设置地址 https://antmoe.gitee.io/project/2020/05/12/05_获取和设置地址.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { console.log('Location对象为:', window.location) window.location = 'https://www.baidu.com' }) // 也可以用下边的方式 // btn.addEventListener('click', function () { // console.log('Location对象的href属性为:', location.href) // location.href = 'https://www.baidu.com' // }) </script> </body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 03JavaScript运算符

    由此可以得到:加法运算时,无论字符串是什么都会进行拼接;而减法、除法、乘法则会尽力转换字符串为number类型,如果无法转换结果为NaN,否则返回运算结果。

    Dreamy.TZK
  • 十、promise的使用

    Promise对象是一个构造函数,用来生成Promise实例。Promise构造函数接收一个函数作为参数。这个参数的函数又有两个参数,这两个参数分别是resol...

    Dreamy.TZK
  • 三、jQuery中的Ajax

    .get(url,[data],[callback],[type])与.post(url,[data],[callback],[type])

    Dreamy.TZK
  • 机器学习数学基础:数理统计与描述性统计

    所谓机器学习和深度学习, 背后的逻辑都是数学, 所以数学基础在这个领域非常关键, 而统计学又是重中之重, 机器学习从某种意义上来说就是一种统计学习。

    石晓文
  • 机器学习数学基础:数理统计与描述性统计

    所谓机器学习和深度学习, 背后的逻辑都是数学, 所以数学基础在这个领域非常关键, 而统计学又是重中之重, 机器学习从某种意义上来说就是一种统计学习。

    Datawhale
  • 网络爬虫的原理

    互联网上,公开数据(各种网页)都是以http(或加密的http即https)协议传输的。所以,我们这里介绍的爬虫技术都是基于http(https)协议的爬虫。

    一墨编程学习
  • Js中==与===

    JavaScript中提供==相等运算符与===严格相等运算符,建议是只要变量的数据类型能够确定,一律使用===

    WindrunnerMax
  • 使用Python和Requests访问HP OpenStack Nova

    因此,我申请加入新的惠普云服务的免费和私人测试版,已经被惠普云团队所接受,今天我终于有一段时间在惠普云端使用OpenStack API。我将从我对服务的第一印象...

    Hero
  • 搭建简易的物联网服务端和客户端-Nodejs_net(二)

    治电小白菜
  • 【Kaggle入门级竞赛top5%排名经验分享】— 分析篇

    Kaggle作为公认的数据挖掘竞赛平台,有很多公开的优秀项目,而其中作为初学者入门的一个好的项目就是:泰坦尼克号生还者预测。

    用户2769421

扫码关注云+社区

领取腾讯云代金券