浏览器对象详解

在进行开发的时很多时候需要使用到浏览器对象,通过学习对浏览器对象有了一个大概了解,这里总结一下。

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对象现在不推荐使用了。

猜你喜欢

转载自blog.csdn.net/lwx931449660/article/details/86496258