BOM的详解
1.window对象概述
2.window的open方法
3.screen对象
4.location对象
5.navigator对象
6.history对象
案例: 64-BOM详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BOM详解</title>
</head>
<body>
<!--
BOM的详解
Window对象的属性
navigator对象
location对象
screen对象
history对象
Window对象的方法
alert
confirm
open
close
prompt
print
-->
<!--
• window对象是对浏览器窗口（某些方法和属性对应的是页签）的功能api 的封装。
• window是浏览器中的顶层对象（也就是说js中的global对象是window）
• window常用的属性
• console ，用于浏览器控制台的访问。
consoe.log();
• innerHeight/innerWidth 浏览器的宽度和高度（包括滚动条）
• name 设置或者读取窗口的名字
• window的常用方法
• moveTo(x,y)/moveBy(w,h) 移动窗口 兼容性不好。
• resizeTo(w,h)/resizeBy(w,h) 调整窗口大小
• alert 进行提醒消息的消息框。
• confirm 进行确认操作的消息框。
• close 关闭窗口的方法。
• print 调出打印窗口
• prompt 交互信息输入
-->
<!--
window的open方法
• open方法是根据指定的参数，将一个资源加载到一个新的浏览上下文（如一个窗口）或一个已经存在的浏览上下文中。
• 语法：
window.open(strUrl, strWindowName, [strWindowFeatures]);
• 参数说明：
•strUrl：新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。
•strWindowName：新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题 。
•strWindowFeatures：可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。
• 例如：
window.open( "http://www.chengcheng.kim", ”个人博客", "width=420,height=230,resizable,scrollbars=yes" );
-->
<!--
screen对象
• Window.screen 返回screen对象，代表电脑的屏幕。
• 常用属性：
• Screen.availHeight 屏幕可用的高度（去掉任务栏）
• Screen.availWidth 屏幕可用的宽度
• Screen.height 屏幕的高度（包括所有的）
• Screen.width 屏幕的宽度
-->
<!--
location对象
• window.location可用获得当前请求地址的对象。也可用document.location是一样的。
• 常用属性：
• href ：可读可写，当前页面的url地址。
• protocol： 协议类型 比如：“http:”
• host：域名+端口 比如： aicoder.com aicoder.com:80
• hostName：域名（不含端口）
• port：端口
• pathname： url中的路径部分， "/zh-CN/docs/Web/API/Location"
• search：url地址中的请求参数 "?id=1&name=2"
• 常用方法：
• Location.assign(url） 页面跳转
• Location.reload() 重新加载页面。他有一个特殊的可选参数，类型为Boolean，
该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
• Location.replace() 用给定的URL替换掉当前的资源。与 assign()方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，
这意味着用户将不能用后退按钮转到该页面
-->
<!--
navigator对象
• navigator.userAgent 返回当前浏览器的一些信息。
• chrome: "Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/60.0.3112.90 Safari/537.36"
• IE8: "4.0(compatible; MSIE 8.0; Windows NT 6.1;Trident/4.0)"
• onLine: 是否联网
-->
<!--
history对象
• window.history记录当前浏览器的浏览记录。
• History.back()
• 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1). • Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
• History.forward()
• 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于
history.go(1). • Note: 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。
• History.go()
• 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When integerDelta is out
of bounds )，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。( 这
点与支持字符串作为url参数的IE有点不同)。
-->
</body>
</html>源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
上一篇: JS - Node节点 - 05
下一篇: JS - DOM特效封装 -07