BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分:
1.ecmascript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ...
2.bom : 浏览器对象模型(browser object model)
2,bom 的组成部分:
1.window对象 每一个子窗口对应的又是一个window对象
2. screen对象
3.location对象
4.history对象
5.navigator对象
6.定时器 (两种)
7.弹框(三种)
8. document (dom-文档对象模型)
1.1window 对象(表示浏览器窗口):
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- 所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- 甚至 html dom 的 document 也是 window 对象的属性之一
1.2window 尺寸:
查看window尺寸有三种方式适用于不同的情况:
1) w3c标准(适用于老版本ie之外的浏览器)
- window.innerheight - 浏览器窗口的内部高度
- window.innerwidth - 浏览器窗口的内部宽度
2) 老版本的ie浏览器
标准模式:
document.documentelement.clientheight)
document.documentelement.clientwidth)
怪异模式(向后兼容)中:
document.body.clientheight
document.body.clientwidth
(如何知道是何种模式?
console.log(document.compatmode)可以查看文档是以什么方式进行解析的
css1compat 标准模式
backcompat 怪异模式
)
function getscreen(){ //获取屏幕的可视宽高 if (window.innerwidth) { //如果window底下有这个属性,就用这个, w3c标准 return { width : window.innerwidth, height : window.innerheight } }else{ //老版本ie if(document.compatmode == "css1compat"){ //标准模式 return { width : document.documentelement.clientwidth, height : document.documentelement.clientheight } }else{ //怪异模式 return { width : document.body.clientwidth, height : document.body.clientheight } } } } console.log(getscreen())
1.3 其他 window 方法
•window.open() - 打开新窗口
•window.close() - 关闭当前窗口
•window.moveto() - 移动当前窗口
•window.resizeto() - 调整当前窗口的尺寸
2.1 screen 对象(包含有关用户屏幕的信息)
- screen.availwidth - 可用的屏幕宽度
- screen.availheight - 可用的屏幕高度
<script> document.write("可用宽度:" + screen.availwidth); document.write("可用高度:" + screen.availheight); </script>
3.1 location对象(用于获得当前页面的地址 (url),并把浏览器重定向到新的页面)
console.log(location.href) //返回(当前页面的)整个 url: console.log(location.hash) //hash 哈希值,也叫锚点,比方说a链接中的 console.log(location.host) // host 设置或返回主机名和当前 url 的端口号。 console.log(location.hostname) // hostname 设置或返回当前 url 的主机名。 console.log(location.pathname) // pathname 设置或返回当前 url 的路径部分。 console.log(location.port) // port 设置或返回当前 url 的端口号。 console.log(location.protocol) // protocol 设置或返回当前 url 的协议。 console.log(location.search) // search 参数(查询字符串) 设置或返回从问号 (?) 开始的 url(查询部分)。
// location.href = "http://www.baidu.com" //放到某一个事件中去触发
4.1 history对象(包含浏览器的历史记录)
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
<body> <a href="http://www.baidu.com">去百度</a> <button>后退</button> <button>前进</button> <script> var btn1 = document.getelementsbytagname("button")[0]; var btn2 = document.getelementsbytagname("button")[1]; btn1.onclick = function(){ history.back() } btn2.onclick = function(){ history.forward() } </script> </body>
5.1 navigator对象(记录了浏览器的一些信息的对象)
- appcodename 返回浏览器的代码名。
- appminorversion 返回浏览器的次级版本。
- appname 返回浏览器的名称。
- appversion 返回浏览器的平台和版本信息。
- browserlanguage 返回当前浏览器的语言。
- cookieenabled 返回指明浏览器中是否启用 cookie 的布尔值。
- cpuclass 返回浏览器系统的 cpu 等级。
- online 返回指明系统是否处于脱机模式的布尔值。
- platform 返回运行浏览器的操作系统平台。
- systemlanguage 返回 os 使用的默认语言。
- useragent 返回由客户机发送服务器的 user-agent 头部的值。
- userlanguage 返回 os 的自然语言设置。
<div id="example"></div> <script> txt = "<p>browser codename: " + navigator.appcodename + "</p>"; txt+= "<p>browser name: " + navigator.appname + "</p>"; txt+= "<p>browser version: " + navigator.appversion + "</p>"; txt+= "<p>cookies enabled: " + navigator.cookieenabled + "</p>"; txt+= "<p>platform: " + navigator.platform + "</p>"; txt+= "<p>user-agent header: " + navigator.useragent + "</p>"; txt+= "<p>user-agent language: " + navigator.systemlanguage + "</p>"; document.getelementbyid("example").innerhtml=txt; </script>
6.1 popupalert 对象
警告框:
alert("文本")
确认框:
confirm("文本")
提示框:
prompt("文本","默认值")
7.1 timing 对象
一次性定时器:
settimeout()未来的某时执行代码;
cleartimeout()取消settimeout();
无限次定时器:
setinterval( );
clearinterval();
8.1 cookie (用来识别用户)
有关cookie的例子:
名字 cookie:
当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "welcome john doe!" 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie:
当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。
日期 cookie:
当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"your last visit was on tuesday august 11, 2005!"。日期也是从 cookie 中取回的。
上一篇: php中变量的3中赋值方式
下一篇: 老师趴在后门很精彩看着黑板
推荐阅读
-
什么是DOM(Document Object Model)文档对象模型
-
BOM—浏览器对象模型(Browser Object Model)
-
JS--dom对象:document object model文档对象模型
-
什么是DOM(Document Object Model)文档对象模型
-
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
-
JavaScrip浏览器对象模型BOM
-
JavaScript之BOM浏览器对象模型
-
了解文档对象模型DOM(Document Object Model)
-
【基础-7】BOM基础:浏览器对象模型
-
JS--dom对象:document object model文档对象模型