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

Posted strongerpian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 浏览器对象模型）的主要内容，如果未能解决你的问题，请参考以下文章

javascript--BOM(browser object model)五大对象

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

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

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

BOM —— 浏览器对象模型(Browser Object Model)

BOM：Browser Object Model(浏览器对象模型)