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 对象 包含有关用于屏幕的信息
- 虽然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 获取出来
}
}
