js_BOM

原创已于 2025-02-20 16:12:36 修改 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2021-03-22 19:46:13 首次发布

javascript 专栏收录该内容

49 篇文章

订阅专栏

Window对象

定义

window对象是最顶级的对象，代表当前的浏览器窗口或标签页，它是 JavaScript 访问浏览器窗口的一个接口，并且也是 ECMAScript 规定的全局对象。这意味着在网页中定义的所有全局变量(var定义)、函数和对象都是 window 对象的属性。

属性

使用var定义的全局变量

所有(使用var)定义的全局变量都是window对象的属性。

let aaa=111
console.log(window.aaa) // undefined

var bbb=111
console.log(window.bbb) // 111

innnerWidth/Height

innerWidth/Height 是只读属性，返回的是当前浏览器窗口的实际宽高(不包含滚动条滚动的距离，不包含工具栏、菜单栏等外部元素)。

<body>
  <script>
    console.log(window.innerHeight) // 729
  </script>
</body>

<style>
  div{
    height: 1000px;
  }
</style>

<body>
  <div></div>
<script>
  console.log(window.innerHeight) // 729
</script>
</body>

上述示例中，即使div的高度超过页面高度，页面出现滚动条，但是innerHight还是729。

虽然大多数浏览器已经兼容该语法，但是在想要确保兼容性时可以使用html/body标签的clientHeight属性

let height = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

let width = document.documentElement.clientWidth || document.body.clientwidth || window.innerWidth;

在很多情况下，可以监听页面的窗口发生变化时，做出一些样式处理

window.addEventListener('resize', function() {
    console.log('新的窗口内容区域高度:', window.innerHeight);
});

navigator对象

navigator对象是window对象的属性，作用是保存浏览器的相关信息

浏览器版本
- navigator.appVision
浏览器名
- navigator.appName
浏览器代码名
- navigator.appCodeName

history对象

history对象是window对象的属性，作用是保存浏览器窗口访问过的信息

history.back()
- 后退到上一个浏览的页面，如果该页面是第一个打开的，则无效果
history.forward()
- 前进到下一个浏览页面，如果该页面是第一个打开的，则无效果

location对象

location对象是window对象的属性，作用是获取url的相关信息。

document对象

document对象是window对象的属性，作用是返回该窗口内装载的html文档，可以通过document获取dom元素，从而操作dom

eg:

  let btn = document.getElementsByTagName('button')[0]

webStorage

webStorage是es6新增的用于存储信息到本地的对象，也是window的属性，作用是将数据保存在浏览器。

方法

[1]输入输出

prompt('输入弹框')
confirm('你确定?')
console.log('')
alert('')
document.write()

[2]定时器

setInterval(function(){},N)
setTimeout(function(){},N)
clearInterval(定时器编码)
clearTimeout(定时器时间编码)

打开关闭网页

打开网页：open('网址')
关闭网页：
- 关闭当前网页：close()
- 关闭指定网页：page.close()

举例说明

<body>
   <button>打开</button>
   <button>关闭</button>
   <script>
     // 点击打开按钮，打开百度网页，点击关闭按钮，关闭百度网页
     let btn = document.getElementsByTagName('button')[0]
     let btn1 = document.getElementsByTagName('button')[1]
     let page
     btn.onclick = function () {
       page = open('http://https://www.baidu.com/')
     }
     btn1.onclick = function () {
       page.close()
     }
   </script>
 </body>

parseInt/parseFloat

parseInt是 JavaScript 中用于解析字符串并返回一个整数的函数。它可以根据指定的基数（进制）将一个表示数字的字符串转换为整数
- 语法
```
parseInt(string, radix)
```
  - string: 要被解析的值。非字符串输入会被强制转换为字符串
  - radix: 可选参数，表示要解析的数字的基数（从2到36）;默认10进制，以0x开头默认16进制
- 示例
  - ```
  console.log(parseInt('1100100', 2)) // 100
```

parseFloat:parseFloat() 是 JavaScript 中用于解析字符串并返回一个浮点数的函数;与 parseInt不同，parseFloat专门用于处理包含小数点的数值字符串，并且总是使用十进制系统进行转换，而不会考虑其他基数。

语法
- ```
parseFloat(string)
```

示例

// 截取到从数字开始的浮点数
console.log(parseFloat('33.333wefbedsf')) // 33.333
// 能够去除空格并能正确导0
console.log(parseFloat('     0000033.333wefbedsf')) // 33.333
// 找不到正确的数值，返回结果为NaN
console.log(parseFloat('wefbedsf')) // NaN