在进行开发的时很多时候需要使用到浏览器对象,通过学习对浏览器对象有了一个大概了解,这里总结一下。
window
window对象充当全局作用域,同时也代表浏览器窗口。
属性:innerWidth 浏览器窗口的内部宽度
innerHeight 浏览器窗口的内部高度
outerWidth 浏览器窗口的整体宽度
outerHeight 浏览器窗口的整体高度
注:内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
navigator
navigator对象表示浏览器的信息,最常用的属性包括:
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent
字符串。
screen
screen对象表示屏幕的信息,常用的属性有:
screen.width:屏幕宽度,以像素为单位;
screen.height:屏幕高度,以像素为单位;
screen.colorDepth:返回颜色位数,如8、16、24。
location
location
对象表示当前页面的URL信息,一个完整的URL。
可以用location.href
获取。要获得URL各个部分的值,可以这么写:
location.protocol; // url协议
location.host; // 主机名
location.port; // 端口号
location.pathname; // 路径名
location.search; // url查询条件
location.hash; // url锚部分
location.href; // 设置或返回当前显示文档的完整url
document
document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节 点。
document的title
属性可以改变浏览器窗口标题。
document对象还有一个cookie
属性,可以获取当前页面的Cookie。
Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求, 就可以用Cookie来区分。当一个用户成功登录后,服务器发送一个Cookie给浏览器,例如user=ABC123XYZ(加密的字符 串)...
,此后,浏览器访问该网站时,会在请求头附上这个Cookie,服务器根据Cookie即可区分出用户。
Cookie还可以存储网站的一些设置,例如,页面显示的语言等等。
JavaScript可以通过document.cookie
读取到当前页面的Cookie:
document.cookie; // 'v=123; remember=true; prefer=zh'
由于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 SP1开始支持。
为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly
。
history
history对象保存了浏览器的历史记录,js可以调用history的以下方法,相当于用户点击浏览器的后退和前进按钮。
back() 加载上一个页面
forward() 加载下一个页面
go() 加载某一个具体页面
history对象现在不推荐使用了。