您的位置：首页 > Web前端 > JavaScript

JavaScript的浏览器对象模型BOM

2017-04-03 20:01 323 查看

浏览器

JavaScript一般是运行在浏览器的，所以浏览器的一些信息我们也是需要了解的。

主流浏览器(重点)

IE 6~11：国内用得最多的IE浏览器，内核是Trident，历来对W3C标准支持差。从IE10开始支持ES6标准；不过现在IE已经被微软抛弃，最新的window系统装的是Edge浏览器

Chrome：Google出品的基于Webkit内核浏览器，内置了非常强悍的JavaScript引擎——V8引擎。由于Chrome一经安装就时刻保持自升级，所以不用管它的版本，最新版早就支持ES6了；

Safari：Apple的Mac系统自带的基于Webkit内核的浏览器，早已支持ES6

Firefox：Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey

移动设备上目前iOS和Android两大阵营分别主要使用Apple的Safari和Google的Chrome，由于两者都是Webkit核心，结果HTML5首先在手机上全面普及，对JavaScript的标准支持也很好，最新版本均支持ES6

另外还要注意识别各种国产浏览器，如某某安全浏览器，某某旋风浏览器，它们只是做了一个壳，其核心调用的是IE，也有号称同时支持IE和Webkit的“双核”浏览器

不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。

在编写JavaScript的时候，就要充分考虑到浏览器的差异，尽量让同一份JavaScript代码能运行在不同的浏览器中

BOM

JavaScript可以获取浏览器提供的很多对象，通过这些对象可以获取到浏览器的很多信息。

window对象

window对象不但充当全局作用域，而且表示浏览器窗口。

具体window对象的方法与属性可以查看W3Cscholl手册

navigator对象

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appVersion：浏览器版本；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

注意： navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。所以针对不同浏览器编写不同的代码。正确做法：

充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算

例如：

//window.innerWith IE浏览器不认识，会返回undefined
//document.body.clientWidth IE浏览器认识
var width = window.innerWidth || document.body.clientWidth;

location

location对象表示当前页面的URL信息。例如，一个完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

location常用来做跳转

location.href = ‘./1.html’;

location.href = ‘http://www.baidu.com‘;

document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document对象还有一个cookie属性，可以获取当前页面的Cookie

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：

<!-- 当前页面在wwwexample.com -->
<html>
<head>
<script src="http://www.foo.com/jquery.js"></script>
</head>
...
</html>

如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

php通过setcookie()函数设置。

history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航