BOM

 

BOM介绍

BOM让JavaScript能够和浏览器“对话”。

1. 什么是BOM

BOM，Browser Object Model，即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，它最初是Netscape浏览器标准的一部分，也就是说，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。

但是为了利用JavaScript完成交互，现代浏览器几乎都实现了相同的方法和属性，这些方法和属性被称作BOM的方法和属性。

2. BOM包含哪些内容

BOM有一个核心对象window，window对象包含了6大核心模块，分别是：

  • document对象，即文档对象

  • frames，即HTML自框架

  • history，即页面的历史记录

  • location，即当前页面的地址

  • navigator，包含浏览器相关信息

  • screen，用户显示屏幕相关属性

 
 

3.1 window对象

BOM的核心对象就是window，window对象也是BOM的顶级对象，所有浏览器都支持window对象，它代表的是浏览器的窗口。

JavaScript的所有全局对象、全局方法和全局变量全都自动被归为window对象的方法和属性，在调用这些方法和属性的时候可以省略window。DOM也是window对象的属性。

window.document.getElementById("header"); //等同于 document.getElementById("header");

 window对象size

 

window对象有两个用来定义浏览器窗口大小的属性（两个属性均返回以px像素为单位的数值）：

  • window.innerHeight

    它返回浏览器窗口的高度

  • window.innerWidth

    返回浏览器窗口的宽度

注意：

浏览器窗口的视窗不包括工具栏和滚动条。

也就是说，全屏状态下，不同的浏览器因为布局不一样，也会返回不同的innerHeight和innerWidth

<script>
  console.log("width: " + window.innerWidth);
  console.log("height: "+ window.innerHeight);
  console.log(typeof window.innerWidth);
  console.log(typeof window.innerHeight);
</script>

 

用chrome全屏打开：

 

用safari全屏打开：

 

 

高度上的区别是因为我的chrome中添加了书签栏，但是Safari没有，而且两个浏览器本身窗口的设计就有区别；宽度上的区别是因为我随手拉开控制台的宽度不一样，视窗大小是不包含控制台的宽度的。

对于IE 5-8，innerWidth和innerHeight并不兼容，需要使用：

  • document.documentElement.clientHeight / document.documentElement.clientWidth

或者

  • document.body.clientHeight / document.body.clientWidth

比较全面的写法

let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

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

 

window的方法

window.open(url, target, specs, replace)

打开一个新的窗口。四个参数(均为可选）分别是:

  • url 要打开窗口的路径

  • target 打开方法

    • _blank 在新窗口打开，默认设置为_blank

    • _self 在原窗口打开，替代原窗口

    • _parent 在父框架中打开

    • name 指定在某个窗口打开

  • specs 规定新窗口的样式（用逗号连接，不用空格）

    • width=pixels

    • height=pixels

  • replace 是否在history列表中替代当前页面

 
<button onclick="myFunction()">
  click to open
</button>

<script>
  function myFunction(){
    window.open("http://www.baidu.com","_self","width=200,height=100");
  }
</script>

 


window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
 
 

window.close()  关闭当前窗口

window.moveTo() 移动窗口到特定位置

window.resizeTo() 修改窗口大小

 

document对象

渲染引擎在解析HTML对象时，会生成一个document对象，即文档对象，它是HTML文档的根节点。每一个元素都会生成对应的DOM对象，由于元素之间有层级关系，整个HTML代码解析结束后，会生成一个由不同节点组成的树形结构，成为DOM树。document用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

 

frames

frame指HTML子框架，即在浏览器里嵌入另一个窗口。父框架和子框架拥有独立的作用域和上下文。

window.frames返回的是一个类数组的对象，对象的内容是当前页面中的<iframe>元素。这些<iframe>元素可以通过索引号来获得。


window.frames[0].location = "https://www.baidu.com";     frames.length; //子框架的个数

<frame>元素也是frames的一种，是一种只读元素，但是它无法在HTML5中使用。

<p>点击按钮修改第一个 iframe 的 src 值 (索引为 0)。</p>
<button onclick="myFunction()">点我</button>

<iframe src="https://c.runoob.com"></iframe>
<iframe src="https://m.runoob.com"></iframe>

<script>
function myFunction() {
    window.frames[0].location = "https://www.runoob.com";
}
</script>//修改iframe标签的src指向

 

history

window.history对象包含浏览器的历史记录，window可以省略。这些历史记录以栈（FIFO）的形式保存。页面前进则入栈，页面返回则出栈。

它是一个只读对象，为了保护用户的隐私，JavaScript在获取这个对象时会受到限制。History对象不允许未授权代码访问会话历史(session history)中的其他页面地址，但可以导航到其他会话历史指向的页面。未授权代码无法清除history,也不能禁止后退/前进功能。

最接近于操作history的方法是location.replace()方法，它可以将会话历史中的当前页面地址替换成指定地址。

history的方法

  • history.back() 跳转到历史记录中的前一个链接

  • history.forward() 跳转到历史记录中的后一个链接

 

location

window.location可以用户获取当前页面地址以及重定向到一个新的页面。

location的属性

  • window.location.href 返回当前页面的地址

  • window.location.hostname 返回当前页面的域名

  • window.location.pathname 返回当前页面的路径和文件名

  • window.location.protocol 返回网页使用的协议（http: 还是 https:）

  • window.location.port 返回当前页面的端口，如果页面使用的是默认端口（http:80,https:443），则大多数浏览器会显示为0或者不显示

  • window.location.assign 加载一个新的文档

  • reload()  重载当前url  还可以传参，如果参数为true时强行加载，从服务器源头加载（会清除掉缓存）

        例  location.reload(ture)

         replace() 用新的url替换当前页面，可以避免跳转前的历史纪录。跟assing的区别是不能返回之前页面

         例 location.replace("http://weibo.com")

   url 统一资源定位符

   protocol(协议）：host（主机名）：port（端口号）：pathname(路径)：？查询字符串（search）#锚点（hash）

   例   http:// www.baidu.com  :8080  /code/xxx.html  ?  username=xxx&age=18 #3

 

例子 封装函数解析search

比如一个url   像是？id=5&search=ok      (&是连接多个键值对）

封装一个函数来获取url中的search，或者是id的值。就是相当于通过传入对应key，返回key对应的value

比如 传入id ，返回5

​

​

//indexOf 如果要检索的字符串值没有出现，则该方法返回 -1  indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，可选参数为在字符串中检测开始的位置

//substring提取不包含结束位置  substring() 方法用于提取字符串中介于两个指定下标之间的字符。

//split分割=号 把arr分割成了两部分，然后输入arr【1】 就可以提取值

 

navigator

navigator对象也是一个只读对象，它用来描述浏览器本身的信息，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

navigator有很多获得浏览器信息的办法，但是大多数办法并不提倡使用，因为它们返回的数据并不准确（如appCodeName, appName, platform等）

navigator的属性

  • navigator.appName 返回浏览器名称（IE11, chrome, firefox, safari都返回Netscape）

  • navigator.appCodeName 返回当前浏览器的内核（chrome, IE, safari和Opera都返回Mozilla）

 

screen

提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。

screen的属性

  • screen.width 显示屏的宽度

  • screen.height 显示屏的高度

screen.width / screen.height是显示屏的宽高；

window.innerWidth / window.innerHeight 是视窗的宽高;

console.log("width: " + window.innerWidth);
console.log("height: "+ window.innerHeight);
console.log("screeW:" + screen.width);
console.log("screeH:" + screen.height);

我们可以测试一下这两组值的区别：

 
 

直接最大化打开html文件，我们可以看到视窗宽度和屏幕宽度相同，高度略有差异（因为工具栏等会占一定宽度），我们将浏览器窗口调小再测试：

 
 

可以看到屏幕宽高是不会随着浏览器的放大缩小而改变的，即屏幕设备大小是一个客观存在的值，除非更换设备，否则这个值是固定的。

  • screen.availWidth 屏幕的可用宽度

  • screen.availHeight 屏幕的可用高度

屏幕的可用宽高即屏幕宽高减去如工具栏的值.

console.log("swidth: " + screen.width);
console.log("sheight: "+ screen.height);
console.log("availW:" + screen.availWidth);
console.log("availH:" + screen.availHeight);

我们可以看看这两组值的差别：

Chrome:

 
 

Safari:

 
 

我试着将mac中的launchbar调矮了一些，测试结果随之变化：

 
 

在mac中，可用高度就是屏幕高度减去顶部工具栏和底部launchbar的高度（前提是launchbar在底部），如果launchbar在左右两侧，那么可用宽度就会是屏幕宽度减去launchbar宽度的值。

 

前端弹窗

JavaScript有三种形式的弹窗：

1. alert

当你需要确保某个信息传递给用户时，使用alert

alert 弹出时，用户需要点击"OK"或者"确定"来继续下一个步骤。

 
 

2. confirm 

当你需要用户验证或者接受某个信息时，使用confirm 

confirm 弹出时，用户需要点击"确定"或"取消"来继续下一个步骤。

window.confirm("Press this confirm button");
 
 

3. prompt 

当你希望用户进入页面前，先输入某个信息时，使用prompt 

prompt 弹出时，用户需要输入一个值，然后点击"确定"或"取消"来继续下一个步骤。如果用户点击确定，prompt 会返回用户输入的值，如果用户点击取消，prompt返回null。

var person = prompt("Please enter your name", "Harry Potter"); //第二个参数为默认值 prompt box可以输入默认值

if (person == null || person == "") {
    txt = "User cancelled the prompt.";
} else {
    txt = "Hello " + person + "! How are you today?";
}
 
 

计时事件

window对象运行执行特定的计时事件。JavaScript的两个关键计时事件包括：

  • setTimeout(fn, 毫秒数) 延时执行

  • setInterval(fn, 毫秒数) 循环执行

setTimeout

setTimeout即隔一定时间后将事件加入到异步队列中  只会执行一次

取消事件使用clearTimeout   

两个参数 1、要执行的函数 2、间隔的时间 单位是毫秒  返回值 一个整数 是定时器的标识 可以用clearTimeout来取消定时器

setInterval   执行多次

即每隔一个间隔时间将事件加入到异步队列

取消该事件使用clearInterval

 

window.onload

onload事件是HTML DOM Event 对象的一个属性，又叫事件句柄（Event Handlers），它会在页面或图像加载完成后（注意是加载完成后）立即发生。

window.onload = function的作用就是在页面加载完成后将function函数绑定到onload事件上并执行。如果页面加载完成之后，只需要执行一个函数function，那么只用window.onload = function也就可以了，但是如果需要执行两个甚至多个函数呢？

直接调用两次onload不就行了:

window.onload=firstfunction;
window.onload=secondfunction;

这么做的话，只有secondfunction会被绑定，因为前面的值被后面的值覆盖了。那么该怎么办？

将两个函数合并到一个函数当中不就行了，匿名函数发挥作用的时候到了：

1

2

3

4

window.onload = function() {

    fristfunction;

    secondfunction;

}

 不过，它也只能绑定两个函数。还好，大神们早已解决了这个问题。西蒙·威利森 (Simon Willison)——jQuery框架的开发者之一编写了下面的addLoadEvent函数：

function addLoadEvent(func) {

    var oldonload = window.onload;//将现有的事件处理函数的值存入变量中

    if (typeof window.onload != 'function') {

        window.onload = func;//如果这个事件处理函数没有绑定任何函数，就把新函数添加给它

    } else {

        window.onload = function() {

            oldonload();

            func();//如果已经绑定了函数，就把新函数追加到现有指令的末尾

      }

    }

}

 

附：相关概念 然后，不管页面加载完成后要执行多少个函数，只要调用这个函数就可以了：
addLoadEvent(firstfunction);
addLoadEvent(secondfunction);
addLoadEvent(thirdfunction);
...

1  支持onload事件的 HTML 标签有<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
    支持该事件的 JavaScript 对象有image（图像）, layer, window（整个页面）
2  事件句柄（Event Handlers），可以在某个事件发生时通过一个事件句柄对某个元素进行操作。
    事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。
3  HTML DOM Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。事件通常与函数结合使用，函数不会在事件发生前被执行（这句很重要）。

 

onmouse

1、onmouseleave（移出）、onmouseenter（移动到），鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。

2、onmouseout（移出）、onmouseover（移动到）、鼠标进入指定元素触发事件，含子元素区域。

上下二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

 

posted @ 2020-05-21 21:11  Ren小白  阅读(145)  评论(0)    收藏  举报
levels of contents