BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型。

浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等。

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性 window.name

Global对象：全局变量，脚本的任何一个地方都能调用的变量。

全局方法：脚本的任何一个地方都能调用的方法。

window对象的方法

对话框

  • alert()

  • prompt()

  • confirm()

1 alert()

2 prompt()

什么也不填返回的时空字符串“"。

3 confirm

4 open()

参数：

 window.onload = function(){

 // 打开子窗口，显示newwindow.html

  window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");

 }

5 close()

点击关闭后，当前窗口关闭，子窗口没有关闭。

编程练习

实现：当点击页面上的按钮时，弹出确认框

（1）当点击按钮上的确定时，打开设置了新特征的子窗口, 新窗口的特征参考任务栏中的描述

（2）当点击按钮上的取消时，关闭当前页面

思路

第一步：获取到按钮元素，并为按钮绑定鼠标单击事件

下面的步骤皆在单击事件中进行

第二步：当点击按钮时，弹出确认框，用if判断对确认框返回的值进行判断

（1）返回的值为true时，说明点击的是确认，打开新的窗口“newPage.html”，用open（）方法，新窗口的特征如下：

①宽300，高300

②窗口距离屏幕上边200，距离屏幕左边600

③窗口不显示地址字段、菜单栏、滚动条以及状态栏

（2）返回值是false为false时，表示点击的是“取消”按钮，当前页面被关闭，用close（）方法。

我的代码

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>打开/关闭页面</title>

    </head>

    <body>

       <input type="button" name="" value="打开页面">

       <script type="text/javascript">

           //补充代码

           var btn = document.getElementsByTagName("input")[0];

           btn.onclick=function(){

           var result=confirm("是否打开页面");

           if(result){

             window.open("newPage.html","newPage","width=300,height=300,left=600,top=200,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");

           }else{

             window.close();

           }

         }

       </script>

    </body>

</html>

页面加载事件

  • onload

 window.onload = function () {
   // 当页面加载完成执行
   // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
 }

  • onunload

 window.onunload = function () {
   // 当用户退出页面时执行
 }

定时器

1 setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

 // 创建一个定时器，1000毫秒后执行，返回定时器的标示
 var timerId = setTimeout(function () {
   console.log('Hello World');
 }, 1000);
 ​
 // 取消定时器的执行
 clearTimeout(timerId);

2 setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

 // 创建一个定时器，每隔1秒调用一次
 var timerId = setInterval(function () {
   var date = new Date();
   console.log(date.toLocaleTimeString());
 }, 1000);
 ​
 // 取消定时器的执行
 clearInterval(timerId);

null——释放内存

location对象

location对象是window对象下的一个属性，使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

location有哪些成员？

  • 使用chrome的控制台查看

  • 查MDN

    MDN

  • 成员

    • assign()/reload()/replace()

    • hash/host/hostname/search/href……

URL

统一资源定位符 (Uniform Resource Locator, URL)

  • URL的组成

 scheme://host:port/path?query#fragment
 http://www.itheima.com:80/a/b/index.html?name=zs&age=18#bottom
 scheme:通信协议
     常用的http,ftp,maito等
 host:主机
     服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
 port:端口号
     整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
 path:路径
     由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
 query:查询
     可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
 fragment:信息片断
     字符串，锚点.

作业

解析URL中的query，并返回对象的形式

 function getQuery(queryStr) {
   var query = {};
   if (queryStr.indexOf('?') > -1) {
     var index = queryStr.indexOf('?');
     queryStr = queryStr.substr(index + 1);
     var array = queryStr.split('&');
     for (var i = 0; i < array.length; i++) {
       var tmpArr = array[i].split('=');
       if (tmpArr.length === 2) {
         query[tmpArr[0]] = tmpArr[1];
       }
     }
   }
   return query;
 }
 console.log(getQuery(location.search));
 console.log(getQuery(location.href));

location对象的常用属性

1 href和hash

hash：锚点

2 host

3 port

位置操作

上述两种方法，跳转的页面会保存到历史记录中，会激活回退按钮。replace方法不会。

刷新， 一般放到代码的最后。

history对象

  • back()

  • forward()

  • go()

1 back()

 2 forward()

3 go()

screen对象

screen对象的availHeight和availWidth属性：

navigator对象

  • userAgent：用来识别浏览器的名称、版本、引擎以及操作系统等信息的内容。

BOM的介绍的更多相关文章

  1. 前端 ---BOM的介绍

    BOM的介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的 ...

  2. 浏览器内核与BOM对象介绍

    BOM(Browser Object Model)对象介绍 我们都知道js有三部分组成,ECMAScript.DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其它浏览器也是风 ...

  3. JavaScript BOM对象介绍

    bom:即broswer object model(浏览器对象模型),由五个对象组成:        Window:对象表示浏览器中打开的窗口 最顶层对象.       Navigator :浏览器对 ...

  4. Bom简单介绍

    1.什么是bom? 全称:浏览器对象模型(Browser Object Model) bom是js的一部分, 2.bom的对象,方法和方法 bom提供了主要的8大对象:Window,Screen,Lo ...

  5. 15 BOM的介绍

    avaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比 ...

  6. Bom对象介绍

    1.windows对象 1.windows对象 1_1.alert:显示一段消息和确认按钮的弹出的警告框 我们平时用的alert的全称就是 window.alert("hahah" ...

  7. JavaScript基础：BOM的常见内置方法和内置对象

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. BOM的介绍 JavaScript的组成 JavaScript基础分为三 ...

  8. JS第三部分--BOM浏览器对象模型

    一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...

  9. UTF-8的BOM含义

    BOM的介绍 在github上写md文件的时候,发现生成自己blog时,报出一个错误是让使用UTF-8编码,然后在Notepad++上把文件转成UTF-8时,发现菜单中有"UTF-8无BOM ...

随机推荐

  1. 08-03-re-模块

    一组特殊符号组成的表达式,用于描述某种规则.该应用场景生活中随处可见. ​ 例如:让有志青年过上体面的生活,这里面就由规则,即有志青年. 正则表达式的作用,以及使用场景 ​ 1.用于从字符串中匹配满足 ...

  2. 前端避免XSS（跨站脚本攻击）

    尽量或禁止使用危险的脚本. 示例1: 如:eval() eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码.

  3. selenium基本元素定位-findElement(By.*)

    selenium基本元素的定位和操作 一. 查找元素 1.1 findElement(By.id) // by——>定位器——>以某种方式去找元素 driver.findElement(b ...

  4. 编码格式分类: 前后端传递数据的编码格式contentType

    urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlenco ...

  5. 「FJOI2018」领导集团问题 解题报告

    「FJOI2018」领导集团问题 题意:给你一颗\(n\)个点的带点权有根树,选择一个点集\(S\),使得点集中所有祖先的点权$\le \(子孙的点权,最大化\)|S|$(出题人语死早...) 一个显 ...

  6. 【Dart学习】-- Dart之匿名方法 & 回调函数 & 闭包

    一,匿名方法定义 (参数1,参数2,....){ 方法体... return 返回值 } 二,匿名方法特性 可赋值给变量,通过变量进行调用 可在其他方法中直接调用或传递给其他方法 void main( ...

  7. 思维——cf1178E

    一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...

  8. 带头结点的双向循环链表----------C语言

    /***************************************************** Author:Simon_Kly Version:0.1 Date: 20170520 D ...

  9. ICPC Asia Nanning 2017 I. Rake It In (DFS+贪心 或 对抗搜索+Alpha-Beta剪枝)

    题目链接:Rake It In 比赛链接:ICPC Asia Nanning 2017 Description The designers have come up with a new simple ...

  10. Codeforces 1173A Nauuo and Votes

    题目链接:http://codeforces.com/problemset/problem/1173/A 思路:模拟. AC代码: #include<bits/stdc++.h> usin ...