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 中取回的。
BOM—浏览器对象模型(Browser Object Model)的更多相关文章
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- BOM (Browser Object Model) 浏览器对象模型
l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...
- 浏览器对象模型(BOM,Browser Object Model)
本文内容 1.概述 2.windows与document 3.对话框 4.定时调用 5.URL解析与访问历史 6.浏览器和屏幕信息 ★概述 &q ...
- 浏览器对象模型BOM(Browser Object Model)
1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...
- BOM(Browser Object Model) 浏览器对象模型
JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM ...
- 有关BOM(Browser Object Model)的内容
包括: BOM概述 BOM模型 Window对象(常用属性和方法,窗口的打开,窗口的关闭,模态对话框,定时器) Navigator对象(遍历navigator对象的所有属性,Navigator 对象集 ...
- BOM—Browser Object Model and DOM—Document Object Model
浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...
随机推荐
- CSS文字的跑马灯特效
上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心! 今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春! 道具:会敲代码的巧手.七窍玲珑心.会 ...
- C语言面试题分类->指针
有关指针的经典面试题 C语言为何如此长寿并实用?C++为什么有那么多精彩?指针可以说是C/C++中的灵魂所在,虽然早期中pascal也有指针,但是和C/C++比起来不是一个级别的.今天为大家深入浅出的 ...
- PTA第三次作业
---恢复内容开始--- 题目 7-1 计算职工工资 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步: ...
- Android 混淆那些事儿
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/WmJyiA3fDNriw5qXuoA9MA 作者:l ...
- [Swift]LeetCode543. 二叉树的直径 | Diameter of Binary Tree
Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...
- [Swift]LeetCode846. 一手顺子 | Hand of Straights
Alice has a hand of cards, given as an array of integers. Now she wants to rearrange the cards into ...
- Spring之AOP流程解析(ProxyFactory)
本节我们从ProxyFactory开始分析.该类有几个比较重要的方法——addAdvice.addAdvisor.getProxy,其中最后一个方法是我们本节的重点.前两个方法都是向ProxyFact ...
- scala的break和continue
scala 是没有 continue 的,但是包含 break,可以用 break 构造出 continue 的效果 这里用到了库: import scala.util.control.Breaks. ...
- 【Redis篇】Redis持久化方式AOF和RDB
一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB) hdfs: fsimageAOF(AppendOnlyFile) ...
- 论Java访问权限控制的重要性
人在什么面前最容易失去抵抗力? 美色,算是一个,比如说西施的贡献薄就是忍辱负重.以身报国.助越灭吴:金钱,算是另外一个,我们古人常说“钱乃身外之物,生不带来死不带去”,但我们又都知道“有钱能使鬼推磨” ...