BOM（Browser Object Model 浏览器对象模型）

window是全局浏览器内置顶级对象

　　表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）

Window 对象表示一个浏览器窗口或一个框架。

　　在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。

也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。

例如，可以只写 document，而不必写 window.document。

　　同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。

除了上面列出的属性和方法，window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

window上的各种属性

name	window的名称
origin	当前地址源
innerWidth	浏览器宽度
innerHeight	浏览器高度
length	frames的数量
scrollTop	纵向滚动条滚动高度
scrollLeft	横向滚动条滚动高度

　　　　console.log(window) 可以查看：各种关于浏览器大小、位置的属性各种常见事件

window下的子对象

location
- window.location.href 当前页面的 URL，可以获取，可以修改（页面跳转）。
- window.location.hostname web 主机的域名
- window.location.pathname 当前页面的路径和文件名
- window.location.port web 主机的端口（80 或 443）
- window.location.protocol 所使用的 web 协议（http:// 或 https://）
- window.location.search 请求参数（？后面的内容）

　　window.location.reload();　　刷新页面的方法。一般情况下给reload()传递一个true，让他刷新，并不使用缓存。缓存的东西一般为js文件，css文件等。用这个方法可以让自己不能动的页面动起来了。刷新当前页面。

　　window.location.replace(); 替换

navigator

　　　　navigator.userAgent 返回浏览器信息（可用此属性判断当前浏览器）

　　　　判断当前浏览器类型的代码：　　　

 1 function isBrowser() {
 2     var userAgent = navigator.userAgent;
 3     //微信内置浏览器
 4     if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
 5         return "MicroMessenger";
 6     }
 7     //QQ内置浏览器
 8     else if(userAgent.match(/QQ/i) == 'QQ') {
 9         return "QQ";
10     }
11     //Chrome
12     else if(userAgent.match(/Chrome/i) == 'Chrome') {
13         return "Chrome";
14     }
15     //Opera
16     else if(userAgent.match(/Opera/i) == 'Opera') {
17         return "Opera";
18     }
19     //Firefox
20     else if(userAgent.match(/Firefox/i) == 'Firefox') {
21         return "Firefox";
22     }
23     //Safari
24     else if(userAgent.match(/Safari/i) == 'Safari') {
25         return "Safari";
26     }
27     //IE
28     else if(!!window.ActiveXObject || "ActiveXObject" in window) {
29         return "IE";
30     }
31     else {
32         return "未定义:"+userAgent;
33     }
34 }

history

history.go(1) 参数可写任意整数，正数前进，负数后退

history.back() 后退

history.forward() 前进

screen: 屏幕

window.screen.width 返回当前屏幕宽度(分辨率值)

window.screen.height 返回当前屏幕高度(分辨率值)

间隔定时器　　setInterval　　//　　clearInterval

  <script>
    var i = 0
    // setInterval('console.log(i++)', 1000) // 一般不会这么写

    // 把函数交给定时器，定时器每隔一段时间取调用一次
    // 定时器的返回值是当前定时器的id（计算机随机分配的）
    var timer = setInterval(function () {
      console.log(i++)
      // 判断终点要在定时器里面写，因为定时器每执行一次都要判断
      if (i === 5) {
        // 停止定时器，根据id来停止
        clearInterval(timer)
      }
    }, 1000)

  </script>

超时定时器　　setTimeout　　//　　clearTimeout

<!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 onclick="fn()">停止定时器</button>
  <script>
    // 3秒之后执行一次
    var timer = setTimeout(function () {
      console.log(123)
    }, 3000)

    function fn () {
      clearTimeout(timer)
    }
  </script>
</body>
</html>

window事件：

https://www.cnblogs.com/strongerPian/p/12716857.html

BOM（Browser Object Model 浏览器对象模型）

猜你喜欢