js中的bom对象

2024年3月18日 165次阅读 来源: yuhualingfeng

ECMAScript 是JavaScript 的中心，但假如要在Web 中运用JavaScript，那末BOM（浏览器对象模
型）则无疑才是真正的中心。BOM 供应了许多对象，用于接见浏览器的功用，这些功用与任
何网页内容无关.

window对象

BOM 的中心对象是window，它示意浏览器的一个实例。在浏览器中，window 对象有两重角色，
它既是经由过程JavaScript 接见浏览器窗口的一个接口，又是ECMAScript 划定的Global 对象。这意味着
在网页中定义的任何一个对象、变量和函数，都以window 作为其Global 对象

全局作用域

由于 window 对象同时扮演着ECMAScript 中Global 对象的角色，因而一切在全局作用域中声明
的变量、函数都邑变成window 对象的属性和要领

var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29

全局变量不能经由过程delete 操作符删除，而直接在window 对象上的定义的属性能够

var age = 29;
window.color = "red";
//在IE < 9 时抛出毛病，在其他一切浏览器中都返回false
delete window.age;
//在IE < 9 时抛出毛病，在其他一切浏览器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

尝试接见未声明的变量会抛出毛病，然则经由过程查询window 对象，能够晓得某个能够未声明的变量是不是存在


//这里会抛出毛病，由于oldValue 未定义
var newValue = oldValue;
//这里不会抛出毛病，由于这是一次属性查询
//newValue 的值是undefined
var newValue = window.oldValue;

窗口关联及框架

假如页面中包括框架，则每一个框架都具有本身的window 对象，而且保留在frames 鸠合中。在frames
鸠合中，能够经由过程数值索引（从0 最先，从左至右，从上到下）或许框架称号来接见响应的window 对
象。每一个window 对象都有一个name 属性，个中包括框架的称号

<html>
    <head>
        <title>Frameset Example</title>
        <meta charset="UTF-8">
    </head>
<frameset rows="160,*">
    <frame src="frames/frame1.html" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="frames/frame2.html" name="leftFrame">
        <frame src="frames/frame3.html" name="rightFrame">
    </frameset>
</frameset>
</html>

以上代码创建了一个框架集，个中一个框架居上，两个框架居下。对这个例子而言，能够经由过程
window.frames[0]或许window.frames["topFrame"]来援用上方的框架。不过，生怕你最好运用
top 而非window 来援用这些框架（比方，经由过程top.frames[0]）,top 对象一直指向最高（最外）层的框架，也就是浏览器窗口,与top相对的是parent,parent指向的是父框架

窗口位置

运用以下代码能够跨浏览器获得窗口左侧和上边的位置。

var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;

体系对话框

体系对话框有三个,分别为:alert,confirm,prompt.
alert为体系提醒框

alert('nice to meet you');

confirm为确认框

var sure = confirm('are you have a good time ?');
if(sure){
alert('yes, you have a good time !');
}

prompt为体系输入框

var getname = prompt('what's you name ?','name');//参数1为提醒语, 参数2为默许字符.
alert(getname);

间歇挪用和超时挪用

间歇挪用运用setTimeout要领,超时挪用运用setInterval要领
这两个要领都有两个参数,第一个参数为实行的代码或函数,第二个参数为实行时间.
固然这两种挪用也有对应的要领来消灭挪用.

 setTimeout(function(){ alert('good morning!'); },1000); //一秒后弹出弹框.
 
 var count = 0;
 var interval =  setInterval(function(){      
    count++;
    if(count > 10){
         clearInterval(interval);  //消灭间歇挪用
        }
 },1000);

setInterval有个不足之处是后一个间歇挪用能够会在前一个间歇挪用完毕之前启动,因而运用setTimeout来模仿setInterval是不错的挑选.

var count = 0; 
function doSoming(){
    count ++;
    if(count<=10){
 setTimeout(doSoming,1000);    
}
}
setTimeout(doSoming,1000);

猎取窗口大小

经由过程以下代码能够跨浏览器猎取页面视口大小

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′

只管’search’属性能够返回查询字符串,但为了越发轻易的接见其参数,能够经由过程下面的代码将其转化为包括参数的对象.

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]);
    value = decodeURIComponent(item[1]);
    if (name.length) {
    args[name] = value;
    }
    }
    return args;
}

经由过程以下任何一种体式格局都邑致使页面的跳转或重载

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);//从新加载(直接从服务器加载)

navigator对象

最早由 Netscape Navigator 2.0 引入的navigator 对象，如今已经成为辨认客户端浏览器的事实标准,navigator有以下跨浏览器属性和要领.

  1. appCodeName 浏览器的称号。平常都是Mozilla，纵然在非Mozilla浏览器中也是云云

  2. appName 完全的浏览器称号

  3. appVersion 浏览器版本，平常不与现实的浏览器版本对应.

  4. cookieEnabled 示意cookie是不是启用

  5. javaEnabled() 示意单签浏览器是不是启用Java

  6. onLine 示意浏览器是不是衔接到了因特网

  7. mimeTypes 在浏览器中注册的MIME范例数组

  8. platform 浏览器的体系平台

  9. plugins 浏览器中装置的插件信息的数组

  10. userAgent 浏览器用户代办字符串
    userAgent是最经常使用的属性.

插件检测

//检测插件（在IE 中无效）
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;
}
//检测Flash
alert(hasPlugin("Flash"));

//检测IE 中的插件
function hasIEPlugin(name){
try {
new ActiveXObject(name);
return true;
} catch (ex){
return false;
}
}
//检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

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){
//这应该是用户翻开窗口后的第一个页面
}
    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000003923425
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞