BOM(浏览器对象模型)
BOM(浏览器对象模型)
一. window
1.定义
- window是js在浏览器环境中 全局变量
- 函数就是window的方法
- 全局变量就是window的属性
2.属性
-
document
-
location
-
history
-
screen
-
navigator
-
innerWidth 文档区域宽度
-
innerHeight 文档区域高度
-
outerWidth 浏览器窗口宽度
-
outerHeight 浏览器窗口高度
document.write("window.innerWidth : "+window.innerWidth+"<br>"); document.write("window.innerHeight : "+window.innerHeight+"<br>"); document.write("window.outerWidth : "+window.outerWidth+"<br>"); document.write("window.outerHeight : "+window.outerHeight+"<br>"); -
name 窗口的名字
<script> window.name = "xiaoyanyan"; </script> -
parent 父窗口
<buttononclick="window.parent.document.body.style.color='red '">改变父窗口</button> -
top 顶层窗口
-
length 子窗口的数量
-
frames 子窗口的集合
<iframe src="01s.html" frameborder="0"></iframe> <iframe src="02.html" frameborder="0"></iframe>
3.方法
-
alert（）警告框
-
confirm（） 确认框
-
prompt（） 可输入弹框
-
setInterval()
-
clearInterval()
-
setTimeout()
-
clearTimeout()
-
open() 打开新窗口
<button onclick="window.open('http://www.itxdl.cn')">open</button>//跳转打开新窗口 <button onclick="window.open('http://www.itxdl.cn', 'xiaoyanyan')">本窗口open</button>//在本窗口打开窗口 <button onclick="window.open('01s.html', '', 'width=400,height=400')">opend对打开的窗口设置</button>//在本窗口打开一个小窗口 -
close () 关闭窗口
-
print（） 打印
<button onclick="window.print()">打印</button> -
scrollBy（） 按照指定像素滚动内容
-
scrollTo（） 把内容滚动到指定位置
<div class="topBar" onclick="gotoTop()"> TOP </div> <script> function gotoTop(){ //获取滚动条滚动的距离 var top = document.body.scrollTop; if (top === 0) { return; } //window.scrollTo(0, 0); window.scrollBy(0, -200); setTimeout(gotoTop, 50); } </script> -
moveBy() 可相对窗口的当前坐标把它移动指定的像素。 仅IE
-
moveTo() 把窗口的左上角移动到一个指定的坐标。 仅IE
-
resizeBy() 按照指定的像素调整窗口的大小。 仅IE
-
resizeTo() 把窗口的大小调整到指定的宽度和高度。 仅IE
二. location (地址位置)
1.属性
-
href 完整的url
-
protocol 协议
-
hostname 主机名
-
port 端口号
-
host 主机名和端口号
-
pathname 文件路径
-
search 查询部分
-
hash 锚点部分
document.write("href: "+location.href+"<br>"); document.write("协议："+location.protocol+"<br>"); document.write("主机名："+location.hostname+"<br>"); document.write("端口名："+location.port+"<br>"); document.write("主机名+端口号："+location.host+"<br>"); document.write("锚的部分："+location.hash+"<br>"); document.write("查询部分："+location.search+"<br>"); document.write("路径部分："+location.pathname+"<br>");
2.方法
-
reload（） 重新加载当前文档
-
assign（） 加载新的文档
-
replace（） 用新的文档替换当前文档
<button onclick="location.reload()">reload</button> <button onclick="location.assign('02.html')">assign</button> <button onclick="location.replace('01s.html')">replace</button>
三.history (历史记录)
1.属性
- length 历史记录的数量
2.方法
-
back（） 回退一步
-
forward（） 前进一步
-
go（n） 前进/后退n步
<button onclick="history.back()">后退一步</button> <button onclick="history.go(-1)">后退一步</button> <button onclick="history.go(-3)">后退三步</button> <button onclick="history.forward()">前进一步</button> <button onclick="history.go(2)">前进二步</button>
四.screen（屏幕）
1.属性
-
width 屏幕宽度
-
height 屏幕高度
<script> document.write("屏幕宽度："+screen.width+"<br>"); document.write("屏幕高度："+screen.height+"<br>"); </script>
五.navigator(导航)
1.属性
-
userAgent 平台，浏览器相关的信息
-
platform 平台
-
appName 返回浏览器的名称
-
appVersion 返回浏览器的平台和版本信息
-
userAgent 返回由客户机发送服务器的 user-agent 头部的值
-
onLine 返回指明系统是否处于脱机模式的布尔值
-
appCodeName 返回浏览器的代码名
-
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
console.log("appCodeName: "+navigator.appCodeName); // appCodeName 返回浏览器的代码名 console.log("userAgent "+ navigator.userAgent);//userAgent 返回由客户机发送服务器的 user-agent 头部的值。 console.log("appCodeName: "+navigator.appName); // appName返回浏览器的名称 console.log("appVersion: "+navigator.appVersion); //appVersion 返回浏览器的平台和版本信息 console.log("platform: "+navigator.platform); //platform 返回运行浏览器的操作系统平台
补充
浏览器内核
- 内核应该包含渲染引擎/JS引擎
- 渲染引擎负责渲染HTML和CSS,JS引擎负责运行JS
- 现在提到浏览器内核也可以单指渲染引擎
常见的浏览器内核
- webkit (chrom safari)
- blink (webkit的改型，chrome,opera)
- trident IE
- Gecko Firfox
- Kestrel 老欧朋
URL URI 区别
- URI 标准 中包含 URN 和 URL
- URI： 统一资源标示符
- URN：统一资源命名符
- URL： 统一资源定位符
