BOM概述

作者: 谢聃 | 来源:发表于2017-02-10 11:46 被阅读61次

BOM 概述

1. BOM（浏览器模型）

Browser Object Moder
浏览器对象模型

什么是BOM ？
BOM 是JS 的组成之一，
- 事项和HTML 的交互
- BOM 中提供了非常对的对象，用于访问浏览器的
- 功能，这些功能与任何网页内容都无关
BOM 的作用：
- 将相关的元素组织包裹起来，提供给我们

BOM核心--- Window

window 实际上表示浏览器的一个实例，
在浏览器中，window实际上扮演了两个角色
它既是通过JS 去访问浏览器窗口的一个接口
又是ECMAScript 中规定的Global 对象，
可以通过window 来操作整个浏览器

============

拓展：
Global 对象
- 是ECMAScript 总非常特殊的一个对象，
  因为这个对象其实根本不存在。
- 但是Global 无法通过new 创建。
  但是Global 还拥有自己的属性、方法、
  甚至还拥有全局对象
- 一般来说 Global 都是默认在浏览器引擎
  启动时候，自动初始化完成的

===========
window 对象就是BOM 的核心对象

所有的对象都是由window 对象延伸出来
全局作用域

var age = 18;  //全局变量

function sayAge(){        // 全局方法
 //   console.log(this.age)  //
        console.log(window.age) ；
}
sayAge();
console.log(age);

window.sayAge();

//this 高级的时候会讲，代表

由于window 对象同时扮演者ECMAScript 的Global
对象，因此所有的全局作用域中声明的全局变量以及函数
等，全部都会变成window 对象的属性和方法

3_window窗口大小问题

针对 IE9+,Chrome,FireFox,Opera 和safari

浏览器窗口的内部宽度
window.innerWidth
浏览器窗口的内部高度
window.innerHeight

var msg="窗口的高度"+window.innerHeight+
"\n窗口的高度"+window.innerWidth;

针对IE6/ IE7/ IE8 /IE5

支持Chrome 和 FireFox
浏览器内部高度
docment.documentElement.clientHight
浏览器内部宽度
docment.documentElement.clientWidth

兼容的版本

var w =window.innerWidth ||
document.documentElement.clientWidth;
var h = 
alert("窗口宽度"+w)

4_调整窗口大小

调整窗口大小

resizeTO()
调整到指定大小
resizeBy()
- 增加指定的宽度和高度（宽度和高度增加10px）
在IE 8 中还可以使用

5_打开窗口

open()

open(URL,name,features)
该方法用于打开一个新窗口
查找一个已经命名的窗口
参数：
URL:
- 可选参数
- 主要声明了要在浏览器新窗口中显示文档的
- URL。如果省略该参数或者该参数数值为空
- 则新窗口不会显示任何文档
name ：
- 可选参数
- 由多个逗号
- 包括数字，字母，下划线
- 声明新窗口的名称
- 标记<a> <from>的target 属性
- 如果指定存在窗口
- 那么open()方法不在创建新窗口
- 而是返回对该窗口的引用
- 同时忽略features
features:
- 可选参数
- 声明标准浏览器特征
- 如果省略，则新窗口具有所有浏览器
- 标准特征
- 如果声明特殊的特征，则按照声明执行
  备注：

=========
窗口特征

width/height
left/top
- 默认是像素
toolbar
- yes/no
- 1/0
scrollbar
- yes/no 默认是 yes
- 1/0
location
- yes/no
- 1/0
status
- yes/no
- 1/0
fullscreen 是否使用全屏显示
- yes/no
- 1/0 默认是 no
menubar 是否显示菜单栏
- yes/no
- 1/0
resizable 是否可调节尺寸
- yes/no
- 1/0
titlebar 显示标题栏
- yes/no
- 1/0

<body>
<button onclick="openAnother()">打开新窗口</button>
<script type...>
var win;
function openAnother(){
    win = window.open("http....","","w400,h400,toolbar=no,menubar= no,left=50,top = 500");
}
//关闭当前窗口
window.close();//一般设置按钮关闭，这里设置了，打开一瞬间就关闭了。
</scrlpt>
</body>

6_定时器

window 中的定时器

window 对象中的...方法
JS 中式单线程语言，但是它允许通过设置超时数值，
以及间歇时间来调用代码在特定时间执行
超时。。在指定的时间后去执行某段代码
周期调用时指每隔指定多长时间....
超时调用
- window.setIimeout()
周期调用
- window.setInterval()

estTimeout(code,millisec)

参数：
- code
指需要放入的函数
- millisec
执行参数1中的代码
时间单位毫秒（ms）
1s=1000ms

var timeoutId = window.setTimeout(go,3000);

调用函数时需要注意：

传入函数的时候，函数名千万不要加括号
因为这个方法不是由我们自己调用
而是通过引擎去进行调用

function go{
    window.open("http://baidu.com");
}

//取消超时调用
//但是如果当前的超时调用已经执行，那么无效果

timeoutId.cancel;

上面的内容相互叠加就可以了。

定时器

<h1></h1>

var h1 = document.getElementById("time");
window.setIntervall(function){
    var msg = new Date().toLocaleString();
}

讲事件还会将

系统对话框

alert() 警告框
confirm() 提示框（对话框）
prompt() 提示框

var msg = prompt("请输入你的名字")；

if(msg != null && msg.length > 0){
    comsole.log(msg);
}

设置判断

该方法用于清除超时问题

window.clearTimeout(timeoutId)

8_location 对象

location 对象

location 对象可以称为window 的子对象，
也是最有用的BOM 对象之一
我们可以通过window.location 来使用它，
但是一般我们都会将 window省略
提供了域当前窗口加载文档有关信息
导航功能
应用场景：
鱼鱼获取当前网页的URL，并浏览器重定向到新的界面

====

location 对象的常用属性
host 主机名称和URL端口名
hostname 主机名
href 完整的URL
psthname 路径部分
port 端口号
protocol 协议
search 查询
协议

document.write("protocol"+location.protocol+
"<br>");

主机名

document.write("hostname"+location.hostname+
"<br>");

将好几个一块写出来

<script...>
document.write("host"+location.host+
"<br>");
document.write("post"+location.post+
"<br>");
document.write("href:"+location.href+
"<br>");
document.write("protocol"+location.protocol+
"<br>");
</script>

HBulider 边改边看模式

9_location常用方法

location 常用方法

assign(url) 加载新的文档
reload(reforce) 重新加载当前文档
replace(newURL) 用新的文档替换当前文档

<body>
<button onclick="" ...>按钮</button>
</body>
<script...>
function openNewURL(){
    location.assign("http://www.baidu.com");
}
function reload(){
    location.reload(true)
}
</script>

reload(reforce)

重新加载当前文档
参数：
reforce
- 可选参数
- 一般填写 true
- 该方法如果没有规定参数，或者填写参数为false
- 采用HTTP 中的头if-Modifed-Since
- 来检测服务器上文档是否发生改变
- 如果文档已经改变，则会通过reload()方法
- 重新加载该文档
- 如果没有，则该方法从缓存中加载文件

该方法如果有参数，则会从服务器中重新加载
该方法如果没有参数，则会优先从缓存器中重新加载

注意：

reload()方法调用之后可能会造成reload 加载顺序
之后的文档不执行
所以一般讲reload()放在最后

relace()

用新的文档代替当前文档
该方法不会在history 对象中生成记录。
使用该方法时，会直接采用新的URL 覆盖History

History 对象

history 对象包含用户（当前浏览器窗口）中访问过的URL
history 对象是window 对象的一部分
可以进行window.history 进行访问
属性：
length
方法：
back() 加载history 列表中的前一个URL
toward()加载history 列表中的下一个URL
go()加载history 列表中指定的某一页面
- 如果为负数，代表后退
- 如果为正数，代表前进

<body>
<button onclick="urlCount()">显示历史记录
<script..>
function urlCount(){
    alert("历史列表中"+history.length + "个URL")；
}
function myForward(){
    history.forward();//前进
}
function myBack(){
    history.back();//后退
}
function myGo(){
    history.myGO(-2);//后退两步
</script>

10_navigator 对象

navigator 对象包含关于浏览器的信息
navigator 对象包含属性描述正在使用的浏览器
我们根据这些属性，进行专门平台的配置
属性：
appCodeName
appName
appVersion
systemLanguage
language
onLine
cookieEnable
- Cookie
- true
- false
platfrom
plugins
userAgent

用法：

navigator.对应的属性

document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");

相应的修改调用上面的数
移动端 B 阶段
媒体查询
Chrome和userAgent

Screen 对象

Screen 对象包含有关用于屏幕的信息
虽然Screen 对在JS 中用处不大，
但是Screen 对象包含浏览器窗口外部的显示器信息
例如能够获取到相应的像素宽度和高度等
各个浏览器的Screen 对象都至少包含以下信息
=========
windth 像素宽度
height 像素高度
colorDepth 颜色位数
avaiWidth 屏幕的像素宽度减去...任务栏
availHeight 屏幕的像素高度减去...任务栏

  document.write("width : " + screen.width +"<br>");
    document.write("height : " + screen.height +"<br>");
    document.write("colorDepth : " + screen.colorDepth +"<br>");
    document.write("availWidth: " + screen.availWidth +"<br>");
    document.write("availHeight: " + screen.availHeight+"<br>");

cookie

注意：本地终端
打开百度
cookie实际是能看到的。

JQ...
首先：E C S Network T（网络加载）P Application <-
Application 里面实际是可以看到的

cookie作用可以作为1.全局变量2. 3. 4. 注意看
cookie缺陷 1.2.3.4. 针对浏览器例如看到的百度这边
以后工作注意提前进行加密
1.2.。4.56.7.在控制台会有相应的对应
有心情可以查查，目前对我们游泳的是删，增，查

cookie 存储

有两个词必须要给出的
name和value

参数1 : cookie 的 name
参数2: cookie 的 value
参数3: cookie 的存储时间（单位 day）

cookie 中 name 不同，那么就可以存储多个 cookil

function saveCookie(name,value,expireday){
    //声明一个日期对象
    var date = new Date();
    console.log(date.getDate());
    
    date.setDate(date.getDate()+expireday);
    console.log(date.toGMTString());
}

cookie 的内容其实就是一段纯文本

encodeURLComponent()

该函数可以将字符串作为URL 组件去进行编码
返回值：
URLString 的副本，其中某些字符将其
十六进制转义序列化

        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";expires = " + date.toGMTString();
            document.cookie = cookieText;
    }
</script>
</html>

储存

function getCookie(name){
    //先去拿到cookie 中的字符串
    var cookieText = document.cookie;
    //获取要查找到的cookie 的name 所在的下标
    var index = cookieText.indexOf(name+"=");
    if(index != -1){
        //查找指定的cookie 结束位置
        var endIndex = 
        cookieText.indexOf
        ...
        //把想要的cookie 中的 value 获取出来
        
    }
}

网友评论

本文标题：BOM概述

本文链接：https://www.haomeiwen.com/subject/ywsgittx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！