BOM - 浏览器API

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 中取回的。

参考: https://www.cnblogs.com/1234wu/p/10216672.html

BOM - 浏览器API的更多相关文章

BOM浏览器对象
BOM 浏览器对象一.浏览器本身就自己有一些对象,不用创建就可以使用 window(当前浏览器窗体) 属性: status opener closed parent top 方法: alert(); ...
第一百一十一节，JavaScript，BOM浏览器对象模型
JavaScript,BOM浏览器对象模型学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
Chrome浏览器扩展开发系列之十六：扩展中可用的Chrome浏览器API
除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...
JavaScript——BOM(浏览器对象模型)，时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
BOM浏览器对象模型和API速查
什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...
BOM核心API
前言我觉得前端中最难的不是业务逻辑,而是API太多,知道的太少. BOM是什么? BOM是Browser Object Model的缩写,即浏览器对象模型.浏览器对象模型提供了可以与浏览器窗口进行互 ...
BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
【微网站开发】之微信内置浏览器API使用
最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...
javascript之BOM浏览器对象模型引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

php stdclass转数组
打印输出是这样 object(stdClass)[11] //object public 'xx' => string 'xxxxxx' (length=21)可用函数处理 get_object ...
bzoj 3224 splay模板题4
再刷水题我就废了... #include<iostream> #include<cstdio> #include<algorithm> #include<cs ...
Visual Studio 2015将在7月20号RTM
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:用了3个多月的VS 2015终于要迎来RTM了,不过感觉有点淡淡的忧伤(为什么呢?请看 ...
java中流转化为Object可序列化
一.PO实体类 public class buisPO{ /** * 业务数据 */ private Bolb buisData; public Blob getBusiData() { return ...
数据库基本----SQL语句大全
学会数据库是很实用D~~记录一些常用的sql语句...有入门有提高有见都没见过的...好全...收藏下...其实一般用的就是查询,插入,删除等语句而已....但学学存储过程是好事...以后数据方面的东 ...
数位DP：SPOJ KPSUM - The Sum
KPSUM - The Sum One of your friends wrote numbers 1, 2, 3, ..., N on the sheet of paper. After that ...
初识Dapper
16年年底开发一个项目,拍卖的项目,对于我这个不入流的程序员来说,雪微是个挑战.程序猿这个行业就是学到老用到老吧.个人比较喜欢sql原生的写法,对EF 还是不怎么感冒,EF 虽然强大,但是用起来还不怎 ...
初读&quot&semi;Thinking in Java&quot&semi;读书笔记之第三章 --- 操作符
更简单的打印语句导入自己编写的静态类库,即可使用print();打印使用Java操作符操作符:+,-,*,/,=,==,!=,+=,?:,%等几乎所有操作符都只能操作"基本类型&qu ...
bzoj4025 二分图 [分治，并查集]
传送门思路是二分图的充要条件:图没有奇环. 考虑按时间分治,用可撤销并查集维护点到根的距离. 仍然可以用一个小trick把两点连边变成根连边,可以看这里. 每次连边时若不连通则连上,否则判一下有没 ...
江西财经大学第一届程序设计竞赛 F题解方程
链接:https://www.nowcoder.com/acm/contest/115/F来源:牛客网时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536 ...