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: 统一资源定位符