JavaScript笔记——BOM的操作和浏览器的检测

BOM的操作

BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,就可能存在浏览器不兼容的情况,那么浏览器共有对象就成了事实的标准。 所以,BOM 本身是没有标准的或者还没有哪个组织去标准它

window 对象

BOM 的核心对象是 window,它表示浏览器的一个实例。window 对象处于 JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象

window的部分属性和方法

属性 含义
opener 打开当前窗口的窗口
length 窗口中的框架数
document 窗口中当前显示的文档对象
方法 含义
alert(text) 创建一个警告对话框,显示一条信息
close() 关闭窗口
confirm() 创建一个需要用户确认的对话框
open(url,name,[options]) 打开一个新窗口并返回新 window 对象
prompt(text,defaultInput) 创建一个对话框要求用户输入信息
setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式
setInterval(function,millis enconds,[arguments]) 经过指定时间间隔后调用一个函数
setTimeout(expression,milli seconds) 在定时器超过后计算一个表达式
setTimeout(expression,milli seconds,[arguments]) 在定时器超过时后计算一个函数

window 下的属性和方法,可以使用 window.属性、window.方法()或者直接属性、方法() 的方式调用。例如:window.alert()和 alert()是一个意思

系统对话框

//弹出警告
alert(‘Lz‘); //直接弹出警告
//弹出对话框
confirm(‘请确定或者取消‘); //这里按哪个都无效
if (confirm(‘请确定或者取消‘)) { //confirm 本身有返回值
alert(‘您按了确定!‘); //按确定返回 true
} else {
alert(‘您按了取消!‘); //按取消返回 false
}
//输入提示框
var num = prompt(‘请输入一个数字‘, 0); //两个参数,一个提示,一个值
alert(num);

新建窗口

使用 window.open()方法可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。 它可以接受四个参数:1.要加载的 URL;2.窗口的名称或窗口目标;3.一个特性字符串;4. 一个表示新页面是否取代浏览器记录中当前加载页面的布尔值

open(‘http://www.baidu.com‘); //新建页面并打开百度
open(‘http://www.baidu.com‘,‘baidu‘); //新建页面并命名窗口并打开百度

不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载

窗口的位置和大小

用来确定和修改 window 对象位置的属性和方法有很多。IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息,Safari 和 Chrome 也同时 支持这两个属性

跨浏览器检测窗口大小的方法 :

var leftX = (typeof screenLeft == ‘number‘) ? screenLeft : screenX; var topY = (typeof screenTop == ‘number‘) ? screenTop : screenY;

窗口页面大小,Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性:innerWidth 和 innerHeight,返回浏览器窗口本身的尺寸;outerWidth 和 outerHeight,返回浏览器窗口本身及边框的尺寸

通过不同浏览器取得各自的浏览器窗口页面可视部分的大小:

var width = window.innerWidth; //这里要加 window,因为 IE 会无效
var height = window.innerHeight;
if (typeof width != ‘number‘) { //如果是 IE,就使用 document
if (document.compatMode == ‘CSS1Compat‘) {          //document.compatMode 可以确定页面是否处于标准模式,如果返回 CSS1Compat 即标准模式
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //非标准模式使用 body
height = document.body.clientHeight;
  }
}

间歇调用和超时调用

JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的 时刻执行。前者在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码

超时调用需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间

function box() {
alert(‘Lee‘);
}
setTimeout(box, 1000);       //直接传入函数名即可(直接使用函数传入的方法,扩展性好,性能更佳)
setTimeout(function () {     //推荐做法
alert(‘Lz‘);
}, 1000);

调用 setTimeout()之后,该方法会返回一个数值 ID,表示超时调用。这个超时调用的 ID 是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用 clearTimeout()方法并将相应的超时调用 ID 作为参数传递给它

var box = setTimeout(function () { //把超时调用的 ID 复制给 box
alert(‘Lz‘);
}, 1000);
clearTimeout(box); //把 ID 传入,取消超时调用

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调 用被取消或者页面被卸载。设置间歇调用的方法是 setInterval(),它接受的参数与 setTimeout() 相同:要执行的代码和每次执行之前需要等待的毫秒数

setInterval(function () { //重复不停执行
            alert(‘Lz‘);
           }, 1000); 

取消间歇调用方法和取消超时调用类似,使用 clearInterval()方法。但取消间歇调用的重 要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面关闭

var box = setInterval(function () { //获取间歇调用的 ID
alert(‘Lz‘);
}, 1000);
clearInterval(box); //取消间歇调用

在开发环境下,很少使用真 正的间歇调用,因为需要根据情况来取消 ID,并且可能造成同步的一些问题,建议不使用间歇调用,而去使用超时调用

编写一个定时器

//超时调用实现定时器
var num=0;
var max=5;
function box(){
    num++;
    document.getElementById(‘a‘).innerHTML+=num;
    if(num==max){
        alert(‘5秒到了‘);
    }else{
        setTimeout(box,1000);
    }
}
setTimeout(box,1000);

location 对象

location 是 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location 对象是 window 对象的属性,也是 document 对象的属性; 所以 window.location 和 document.location 等效

alert(location); //获取当前的 URL

location的部分属性和方法:

属性 内容
host 主机名:端口号
hostname 主机名
href 整个 URL
pathname 路径名
port 端口号
protocol 协议部分
search 查询字符串
方法 功能
reload() 重载当前 URL
repalce() 用新的 URL 替换当前页面
location.port = 8888; //设置端口号,并跳转
alert(location.port); //获取当前端口号,
location.hostname = ‘Lz‘; //设置主机名,并跳转
alert(location.hostname); //获取当前主机名,
location.pathname = ‘Lz‘; //设置当前路径,并跳转
alert(location.pathname); //获取当前路径,
location.protocal = ‘ftp:‘; //设置协议,没有跳转
alert(location.protocol); //获取当前协议
location.search = ‘?id=5‘; //设置?后的字符串,并跳转
alert(location.search); //获取?后的字符串
location.href = ‘http://www.baidu.com‘; //设置跳转的 URL,并跳转
alert(location.href); //获取当前的 URL

编写一个函数来获取URL传值中?后面的值

function getArgs() {
//创建一个存放键值对的数组
var args = [];
//去除?号
var qs = location.search.length > 0 ? location.search.substring(1) : ‘‘;
//按&字符串拆分数组
var items = qs.split(‘&‘);
var item = null, name = null, value = null;
//遍历
for (var i = 0; i < items.length; i++) {
item = items[i].split(‘=‘);
name = item[0];
value = item[1];
//把键值对存放到数组中去
args[name] = value;
}
return args;
}

history 对象

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

history的部分属性和方法:

属性 描述
length history 对象中的记录数
方法 功能
back() 前往浏览器历史条目前一个 URL,类似后退
forward() 前往浏览器历史条目下一个 URL,类似前进
go(num) 浏览器在 history 对象中向前或向后
function back(){      //上一页(历史记录)
    history.back();
}

function forward(){          //下一页(历史记录)
    history.forward();
}

function go(num){              //num为正数代表下页,为负数代表上页
    history.go(num);
}

可以通过判断 history.length == 0,得到是否有历史记录

浏览器检测

由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要 的步骤。虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功 能;但在现实中,浏览器之间的差异却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略

navigator 对象

navigator对象,现在已经成为识别客户端浏览器的事实标准。与之前的 BOM 对象一样,每个浏览器中 的 navigator 对象也都有 一套自己的属性

部分navigator的属性:

属性 说明
appName 完整的浏览器名称和版本信息
platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数 组
userAgent 浏览器的用户代理字符串
userLanguage 操作系统的默认语言
alert(‘浏览器版本‘+navigator.appName);
alert(‘用户代理字符串‘+navigator.userAgent);
alert(‘浏览器所在平台‘+navigator.platform);

检测插件

插件是一类特殊的程序。他可以扩展浏览器的功能,通过下载安装完成。比如,在线音乐、视频动画等等插件。但是IE浏览器没有插件,它提供了ActiveX 控件。ActiveX 控件一种在 Web 页面中嵌入对象或组件的方法

一个检测浏览器是否有flash插件的方法(兼容IE):

//检测是否有flash插件
function hasPlugin(name){
    var 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;
}

function hasIEplugin(name){
    try{
        new ActiveXObject(name)        //检测是否安装该ActiveX 控件
        return true;
    }catch(e){
        return flase;
    }
}

function hasFlash() {
    //首先,先去检测非IE的浏览器
    var result = hasPlugin(‘Flash‘);            //如果返回true,说明检测到了,并且不是IE浏览器
    if (!result) {                                        //如果没有检测到,说明这个浏览器没有flash插件,或者它可能是IE浏览器
        result = hasIEPlugin(‘ShockwaveFlash.ShockwaveFlash‘);    //ShockwaveFlash.ShockwaveFlash 是 IE 中代表 FLASH 的标识符,你需要检查哪种
                                                                    //控件,必须先获取它的标识符
    }
    return result;
}
alert(hasFlash());

用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次 HTTP 请求 过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过 JavaScript 的 navigator.userAgent 属性访问。 用户代理代理检测,主要通过 navigator.userAgent 来获取用户代理字符串的,通过这组 字符串,我们来获取当前浏览器的版本号、浏览器名称、系统名称。但是这种在客户端检测用户代理的方式可能存在争议,是因为它具有一定的欺骗性

一个简单检测用户浏览器内核,版本,和使用操作系统的方法

//用户代理字符串(这里输出用户代理信息以进行对比)
document.write(navigator.userAgent);
document.write(‘<br />‘);
document.write(navigator.platform);

var client = function () {                    //创建一个对象

    //引擎
    var engine = {
        ie : false,                                    //这个属性用于确定是否是老版本IE引擎
        trident:false,                              //IE新版本
        gecko : false,
        webkit : false,
        khtml : false,
        opera : false,

        //引擎的版本
        ver : 0
    };

    //浏览器
    var browser = {
        ie : false,
        firefox : false,
        chrome : false,
        safari : false,
        opera : false,
        edge:false,

        //浏览器的版本号
        ver : 0,
        //浏览器通用名称
        name : ‘‘
    };

    //系统
    var system = {
        win : false,
        mac : false,
        x11 : false,

        //系统名称
        sysname : ‘‘
    };

    //核心检测程序区
    var ua = navigator.userAgent;
    var p = navigator.platform;

    if (p.indexOf(‘Win‘) == 0) {
        system.win = true;                        //用于确定是windows系统
        system.sysname = ‘Windows‘;
    } else if (p.indexOf(‘Mac‘) == 0) {
        system.mac = true;                        //用于确定是Mac系统
        system.sysname = ‘Macintosh‘;
    } else if (p == ‘X11‘ || p.indexOf(‘Linux‘) == 0) {
        system.x11 = true;                        //用于确定是Mac系统
        system.sysname = ‘Linux‘;
    }

    if (window.opera) {
        engine.opera = browser.opera = true;                //表示确定opera引擎
        engine.ver = browser.ver =parseFloat(window.opera.version());
        browser.name = ‘Opera‘;
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {
        engine.webkit = true;                //表示确定webkit引擎
        engine.ver = parseFloat(RegExp[‘$1‘]);
        if (/Edge\/(\S+)/.test(ua)){
            browser.edge = true;
            browser.ver = parseFloat(RegExp[‘$1‘]);
            browser.name = ‘Edge‘;
        }else if (/Chrome\/(\S+)/.test(ua)) {
            browser.chrome = true;
            browser.ver = parseFloat(RegExp[‘$1‘]);
            browser.name = ‘Chrome‘;
        }else if (/Version\/(\S+)/.test(ua)) {
            browser.safari = true;
            browser.ver = parseFloat(RegExp[‘$1‘]);
            browser.name = ‘Safari‘;
        }
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.gecko = true;                //表示确定gecko引擎
        engine.ver = parseFloat(RegExp[‘$1‘]);
        if (/Firefox\/(\S+)/.test(ua)) {
            browser.firefox = true;
            browser.ver = parseFloat(RegExp[‘$1‘]);
            browser.name = ‘Firefox‘;
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ie = browser.ie = true;                        //老版本ie引擎
        engine.ver = browser.ver = parseFloat(RegExp[‘$1‘]);
        browser.name = ‘Internet Explorer‘;
    }else if(/Trident\/([^;]+)/.test(ua)){      //新版本ie引擎
        engine.trident= browser.ie=true;
        engine.ver=parseFloat(RegExp[‘$1‘]);
        browser.name = ‘Internet Explorer‘;
        if(/rv:([^\)]+)/.test(ua)){
            browser.ver = parseFloat(RegExp[‘$1‘]);
        }
    }

    return {                                        //返回一个对象,可以同时返回引擎,浏览器和系统的对象
        engine : engine,                        //前一个engine是属性,后一个engine是对象值
        browser : browser,
        system : system
    }

}();                                                    //自我执行

alert(client.system.sysname + ‘|‘ +client.browser.name + client.browser.ver);
时间: 2024-10-29 19:07:36

JavaScript笔记——BOM的操作和浏览器的检测的相关文章

JavaScript高级程序设计学习笔记--BOM

window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的Global对象. 全局作用域 由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法.来看下面的例子: var age=29; function sayAge(){ alert(this.age); }

Javascript学习笔记3 Javascript与BOM简介

什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 BOM结构图 BOM对象包括 window对象 是BOM的顶层(核心)对象,所

学习笔记: JavaScript/JQuery 的cookie操作

转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断用户是否登录.保存偏好设置等.我用到这个是写扫雷时,需要用cookie保存用户的设置,如行.列等.功能已具,笔而记之. cookie具有特定的格式——         cookiename=cookievalue; expires=epirationDateGMT; path=URL; domin=

javascript中BOM部分基础知识总结

一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习BOM学什么 我们将学到与浏览器窗口交互的一些对象,例如

BOM(Browser Object Model) 浏览器对象模型

JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM定义了JavaScript进行操作浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身.屏幕功能部件.框架.浏览历史记录等)的途径以及操作方法.BOM是JavaScript应用中唯一没有相关标准的部分, ,每种浏览器都有其特有的BOM扩展实现. BOM对象 描述Window JavaSc

Javascript 笔记与总结(2-1)Javascript 与 DOM

浏览器有渲染 html 的功能,把 html 源码在内存里形成一个 DOM 对象,就是文档对象. 浏览器内部有一个 js 的解释器 / 执行器 / 引擎,如 Chrome 的 V8 引擎. 在 html 中写一个 js 代码,js 代码被引擎执行,执行的结果往往就是对 DOM 的操作 —— 常见的特效(图片漂浮,文字变色等) 浏览器是 " 宿主 ",但 js 的宿主不限于浏览器,也可能是服务器端(可用来操作文本.网络.数据库等,例如服务器 js 框架:Node.js,它把 js 引擎放

javascript笔记5-BOM

Javascript应用的平台很多,不仅仅针对Web.在Web中使用Javascript,BOM(browser object model,浏览器对象模型)是核心. BOM提供了很多对象,用于访问浏览器的功能. window对象. BOM的核心对象是window,它表示浏览器的一个实例. window有双重角色,一个是BOM提供的浏览器对象,javascript通过window来访问浏览器的各个功能.属性.比如: window的另一重角色,是javascript的Global对象. Global

【JavaScript】BOM基础总结

javascript看了也一段时间了,前面讲的是基础的知识,还是很好理解的,后面的内容有些也很基础,像BOM,都是介绍的javascript的基础内容,下面对它进行一下小小的总结. 先来一张小图: 一.BOM基础 BOM是browser object model的缩写,简称浏览器对象模型.它提供了很多对象,用于访问浏览器的功能,也就是对浏览器进行操作的.浏览器又显示的内容,而BOM就是承载着我们看到内容的一个载体.BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问

学习JavaScript之BOM部分

前面我学习了DOM也就是文档对象模型,BOM呢,就是浏览器对象模型,它可以对浏览器窗口进行访问和操作. 与DOM不同的是它的老大元素不在是document,而是window,打开浏览器时,JavaScript就默认创建一个Window对象,用来代表整个浏览器窗口.使用这个对象可以读浏览器窗口进行操作.导航或者打开新的窗口.弹出系统对话框. 在Window对象中,我比较感兴趣的就是它的窗口操作和时间间隔和暂停,虽然对窗口操作比较感兴趣,但是应该尽量少用,因为移动浏览器窗口和调整它的大小会对用户产生