javascript的浏览器Bom详解

       BOM(BrowserObjectModel)也叫浏览器对象模型,描述与浏览器进行交互的方法和接口。BOM由多个对象组成,

其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

       JavaScript由三部分组成:ECMAScript,BOM,DOM。BOM提供了很多对象,用于访问浏览器的功能。

下面介绍浏览器的三个公共对象:window对象,location对象,history对象。

window对象

BOM 的核心对象是window,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,
它既是通过JavaScript 访问浏览器窗口的一个接口,又是ECMAScript 规定的Global 对象。这意味着
在网页中定义的任何一个对象变量函数,都以window 作为其Global 对象

window对象的比较常用的知识点:全局作用域、窗口宽高、窗口位置、定时器的设置

获取窗口大小

通过以下代码可以跨浏览器获取页面视口大小

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if(typeof pageWidth !="number"){
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
        }
    else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
     }
}

  

location对象

location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能
以下是location对象的属性列表.

    1. hash 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串,例"#contents"
    2. host 返回服务器名称和端口号(如果有).例"www.zhaosywz.com:80"
    3. hostname 返回不带端口号的服务器名称.例"www.zhaosywz.com"
    4. href 返回当前页面的完整url.例"www.zhaosywz.com/index.html"
    5. pathname 返回url中的目录或文件名,例"/category/shoes"
    6. port 返回url的端口号,如果没有则返回空字符串.例"8080"
    7. protocol 返回页面使用的协议。通常是http:或https:
    8. search 返回URL的查询字符串。这个字符串以问号开头,‘?id=100

    

通过以下任何一种方式都会导致页面的跳转或重载

location.href = "http://www.baidu.com";
location.hash = "#section1";
location.search = "?q=javascript";
location.hostname = "www.yahoo.com";
location.pathname = "mydir";
location.port = 8080;

通过reload()可以重新加载当前页面

location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true);//重新加载(直接从服务器加载)

history对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。

//后退一页
history.go(-1);

//前进一页
history.go(1);

//前进两页
history.go(2);

//跳转到最近的包含‘wrox.com‘字符的页面
history.go("wrox.com");

//后退一页
history.back();
//前进一页
history.forward();

if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}

history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起

时间: 2024-10-29 21:01:56

javascript的浏览器Bom详解的相关文章

BOM详解

1.WINDOW对象 BOM的核心对象是WINDOW,它表示一个浏览器的实例.在浏览器中,window对象有双重角色,它既是通过 JavaScript访问浏览器的一个接口,又是ECMAScript规定的Global对象.这意味着,在网页中定义任意一个对象,变量和函数,都以WINDOW作为其Global对象,因此有权访问parseInt()等方法. 1.1全局作用域 由于WINDOW对象同时扮演者ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量,函数都会变成windo

javascript AJAX与Comet详解

          博客专家福利      [限时活动]建专辑得大奖       专访荣浩:流程的永恒之道      当青春遇上互联网,能否点燃你的创业梦      推荐有礼--找出您心中的技术大牛 javascript AJAX与Comet详解 分类: javascript2012-12-24 17:39 367人阅读 评论(0) 收藏 举报 XMLHttpRequest对象 在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的.在IE中可能会遇到三种不同版本的XHR对象,即M

JavaScript 开发规范要求详解

作为一名开发人员(We前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可

Android网页浏览器开发详解(一)

Android网页浏览器开发详解(一) 请支持原创,尊重原创,转载请注明出处:http://blog.csdn.net/kangweijian(来自kangweijian的csdn博客) Android 网页浏览器开发器开发详解(一),主要通过WebView类实现载入网页,刷新网页,向前载入历史网页,向后载入历史网页和缩放网页等五个功能. Android 网页浏览器开发器开发详解(二),主要实现书签和历史记录的保存,删除,编辑等功能. Android 网页浏览器开发器开发详解(三),主要通过As

Javascript 异步加载详解(转)

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

【JavaScript中的this详解】

前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的规律 this指向的规律往往与函数调用的方式息息相关:this指向的情况,取决于函数调用的方法有哪些. 我们来看一下姜浩五大定律: 姜浩五大定律: ①通过函数名()直接调用:this指向window: ②通过对象.函数名()调用的:this指向这个对象: ③函数作为数组的一个元素,通过数组下标调用的

JavaScript 作用域链图详解

<script type="text/javascript"> /** * 作用域链: */ var a = "a"; function hao947(){ var b = "b"; alert(a);// output a alert(b);// output b // alert(c);// output undefind function hao(){ var c = "c"; alert(a);// out

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. 前端UI资源I分享 <HTML> <HEAD><TITLE>Cancels L