JavaScript基础——浏览器对象模型(BOM)

原创 2015年11月17日 17:44:28

浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口以及页面可见区域。

同时,window对象还是ECMAScript中的Global对象,因而所有全局变量和函数都是它的属性,

且所有原生的构造函数及其他函数也都存在于它的命名空间下。BOM的组成部分的主要内容有:

1)在使用框架时,每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。

   每个框架都保存在frames集合中,可以通过位置或通过名称来访问。

2)有一些窗口指针,可以用来引用其他框架,包括父框架。

3)top对象始终指向最外围的框架,也就是整个浏览器窗口。

4) parent对象表示包含当前框架的框架,而self对象则回值window。

5) 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性,可以逐级或整体性地修改浏览器的URL。

6)调用replace()方法可以导航到一个新URL,同时该URL会替换浏览器历史记录中当前显示的页面。

7)navigator对象提供了与浏览器有关的信息。到底提供哪些信息,很大程度上取决于用户的浏览器;

   不过,也有一些公共的属性(如userAgent)存在于所有浏览器中。

BOM中还有两个对象:screen和history,但它们的功能有限。screen对象中保存着与客户端显示器有关的信息,

这些信息一般只用于站点分析。history对象为访问浏览器的历史记录开了一个小缝隙,

开发人员可以据此判断历史记录的数量,也可以在历史记录中向后或向前导航到任意页面。

/*
 * BOM
 */
function cl(x){
    console.log(x);
}
/**
 *8.1 window对象
 */
//8.1.1全局作用域
var age=29;
function sayAge(){
    cl(this.age);
}
cl(window.age);//=>29
sayAge();   //=>29
window.sayAge();//=>29
//全局变量不能通过delete操作符删除,直接在window对象上的定义的属性可以
var age2=28;
window.color="red";
delete window.age2;
delete window.color;
cl(window.age2);//=>28
cl(window.color);//=>undefined
//尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在
//var newValue=oldValue;//会抛出错误,因为oldValue未定义
var newValue=window.oldValue;//不会抛出错误,这是属性查询,newValue的值是undefined

//8.1.2 窗口关系及框架
//访问某个框架的不同方式
//window.frames[1];
//window.frames["leftFrame"];
//top.frames[1];
//top.frames["leftFrame"];
//frames[1];
//frames["leftFrame"];

//8.1.3 窗口位置
//跨浏览器取得窗口左边和上边的位置
var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.scrollX;
var topPos=(typeof window.screenTop=="number")?window.screenTop:window.scrollY;
//移动窗口到一个新位置(可能会被浏览器禁用)
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50像素
window.moveBy(-50,0);

//8.1.4 窗口大小
//获取页面视口的大小
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;
    }
}
//调整浏览器窗口的大小(可能被浏览器禁用)
//调整到100*100
window.resizeTo(100,100);
//调整到200*150
window.resizeBy(100,50);
//调整到300*300
window.resizeTo(300,300);

//8.1.5 导航和打开窗口
//8.1.5.1 弹出窗口:window.open()
var sinaWin=window.open("http://www.sina.com.cn/","_blank","height=400,width=400,top=10,left=10,resizable=yes");
//调整大小
sinaWin.resizeTo(500,500);
//移动位置
sinaWin.moveTo(100,100);
//关闭新窗口
sinaWin.close();
cl(sinaWin.opener==window);//true 指向调用window.open()的窗口或框架
//8.1.5.2 安全限制
//8.1.5.3 弹出窗口屏蔽程序
//检测弹出窗口是否被屏蔽了
var blocked=false;
try{
    var baiduWin=window.open("http://www.baidu.com","_blank","height=600,width=600,top=100,left=100,resizable=yes");
    if(baiduWin==null){
        blocked=true;
    }
}catch(ex){
    blocked=true;
}
if(blocked){
    alert("弹出窗口被浏览器内置的屏蔽程序阻止了");
}

//8.1.6
//间歇调用和超时调用:setTimeout()、setInterval()
//设置超时调用
var timeoutId=setTimeout(function(){
    baiduWin.close();
},3000);
//取消超时调用
clearTimeout(timeoutId);
var num=0;
var max=10;
var intervalId=null;
function incrementNumber(){
    num++;
    //如果执行次数达到了max设定的值,则取消后续尚未执行的调用
    if(num==max){
        clearInterval(intervalId);
        alert("结束");
    }
}
intervalId=setInterval(incrementNumber,500);

//8.1.7 系统对话框 alert()、confirm()、prompt()、find()、print()
if(confirm("你确定要参加吗?")){
    alert("你确定了参加此次活动");
}else{
    alert("你取消了参加此次活动");
}
var result=prompt("请输入您的姓名","Jason");
if(result!==null){
    alert("欢迎你,"+result);
}
//显示"查找"对话框
window.find();
//显示"打印"对话框
window.print();

/*
 * BOM
 */
function cl(x){
    console.log(x);
}
/**
 *8.2 location对象
 */
//location对象既是window对象的属性,也是document对象的属性
cl(location.hash);      // (空字符串)
cl(location.host);      // localhost:63342
cl(location.hostname);  // localhost
cl(location.href);      // http://localhost:63342/IDEA-workspace/JsHigh_book/L08/l08.html
cl(location.pathname);  // /IDEA-workspace/JsHigh_book/L08/l08.html
cl(location.port);      // 63342
cl(location.protocol);  // http:
cl(location.search);    // (空字符串)
//8.2.1 查询字符串参数
//解析查询字符串,然后返回包含所有参数的一个对象
function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    var qs=(location.search.length>0?location.search.substring(1):""),
        //保存数据的对象
        args={},
        //取得每一项
        items=qs.length?qs.split("&"):[],
        item=null,
        name=null,
        value=null,
        //在for循环中使用
        i= 0,
        len=items.length;
    //逐个将每一项添加到args对象中
    for(i=0;i<len;i++){
        item=items[i].split("=");
        name=decodeURIComponent(item[0]);//解码被编码过的name
        value=decodeURIComponent(item[1]);//解码被编码过的value
        if(name.length){
            args[name]=value;
        }
    }
    return args;
}
//假设查询字符串是 ?q=javascript&num=10
var args=getQueryStringArgs();
args["q"];      //"javascript"
args["num"];    //"10"

//8.2.2 位置操作
//改变浏览器的位置
 location.assign("http://www.baidu.com/");
 window.location="http://www.sina.com.cn/";
 location.href="http://www.taobao.com/"; //最常用
//调用replace()方法,禁用后退按钮,让用户不能返回前一个页面
setTimeout(function(){
    location.replace("http://www.qq.com/");
},1000);
//reload():重新加载当前显示的页面
location.reload();//重新加载(有可能从缓存中加载)
location.reload(true);//重新加载(从服务器重新加载)

/*
 * BOM
 */
function cl(x){
    console.log(x);
}
/**
 *8.3 navigator对象
 */
cl(navigator.appCodeName);  //=>Mozilla
cl(navigator.appName);      //=>Netscape
cl(navigator.appVersion);   //=>5.0 (Windows)
cl(navigator.cookieEnabled);//=> true
cl(navigator.javaEnabled());//=>false
cl(navigator.language);     //=>zh-CN
cl(navigator.mimeTypes);    //=> MimeTypeArray
cl(navigator.onLine);       //=>true
cl(navigator.platform);     //=>Win32
cl(navigator.plugins);      //=> PluginArray
cl(navigator.product);      //=>Gecko
cl(navigator.productSub);   //=>20100101
cl(navigator.systemLanguage);//=>undefined
cl(navigator.userAgent);    //=>Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
cl(navigator.userLanguage); //=>undefined

//8.3.1 检测插件
//在W3C浏览器中检测插件的方法
function hasPlugin(name){
    name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
            return true;
        }
    }
    return false;
}
//在IE浏览器中检测插件的方法
function hasIEPlugin(name){
    try{
        new ActiveXObject(name);
        return true;
    }catch(ex){
        return false;
    }
}
//检测所有浏览器中的Flash
function hasFlash(){
    var result=hasPlugin("Flash");
    if(!result){
        result=hasIEPlugin("ShockwaveFlash.ShocksaveFlash");
    }
    return result;
}
cl(hasFlash());//=>true

//8.3.2 注册处理程序(html5内容)
//将一个站点注册为处理RSS阅读器源的处理程序
//navigator.registerContentHandler("application/rss+xml","http://www.somereader.com?feed=%s","Some Reader");
//将一个应用程序注册为默认的邮件客户端
//navigator.registerProtocoHandler("mailto","http://www.163.com?cmd=%s","Some Mail Client");

/**
 * 8.4 screen对象
 */
cl(screen.availHeight); //=>1040
cl(screen.availWidth);  //=>1920
cl(screen.availTop);    //=>0
cl(screen.availLeft);   //=>0
cl(screen.colorDepth);  //=>24
cl(screen.height);      //=>1080
cl(screen.width);       //>1920

/**
 * 8.5 history对象
 */
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的baidu.com页面
history.go("baidu.com");
//后退一页
history.back();
//前进一页
history.forward();
//检测用户是否一开始就打开了你的页面
if(history.length==0){
    cl("这是用户打开的第一个窗口");
}


相关文章推荐

JavaScript基础——浏览器对象模型(BOM)

简介 ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功...

JavaScript——BOM(浏览器对象模型),时间间隔和暂停

BOM(浏览器对象模型) 1、基本的BOM体系2、screen 对象3、location对象4、history对象5、navigator对象6 、时间间隔和暂停setTimeout 和 setInte...
  • whh4122
  • whh4122
  • 2014年10月29日 21:05
  • 645

javascript学习之 function类型 (29)——浏览器对象模型 Bom 简介

1、介绍: 1.BOM(Browser Object Document)即浏览器对象模型。 2.由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window; 3....

JavaScript学习之 BOM(浏览器对象模型)

在全局作用域中声明的所有变量和函数,都会成为window对象的成员。 1、窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集...
  • hslhy
  • hslhy
  • 2012年06月11日 16:41
  • 639

JavaScript的浏览器对象模型BOM

浏览器JavaScript一般是运行在浏览器的,所以浏览器的一些信息我们也是需要了解的。主流浏览器(重点) IE 6~11:国内用得最多的IE浏览器,内核是Trident,历来对W3C标准支持差。从I...
  • Noneyes
  • Noneyes
  • 2017年04月03日 20:01
  • 334

JavaScript 入门(三)BOM浏览器对象模型

操作浏览器 BOM浏览器对象模型 --操作浏览器 //window对象,最低层的对象,其6大属性本身也是对象; document属性也是对象,其有5大属性(也是对象) //全局变量是 window...

javascript之BOM浏览器对象模型引入

/* javascript组成部分: EMCAScript(基本语法) BOM( Browser Object MOdel) 浏览器对象模型. 浏览器对象模型中把浏览器 的各个部分都是用了一个对象...

JavaScript-BOM(浏览器对象模型)

1. window对象 BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScrip...

javascript BOM 浏览器对象模型

BOM (Browser Object Model,即浏览器对象模型) 页面以外事物所拥有的对象(即浏览器窗口和桌面屏幕) BOM是一个用于访问浏览器和计算机屏幕的对象集合 //一、window对象...

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象   BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript基础——浏览器对象模型(BOM)
举报原因:
原因补充:

(最多只允许输入30个字)