JavaScript高级程序设计(反刍)7

第八章:

BOM (Browser Object Model) 操作,也就是浏览器对象模型,核心对象是window,window对象既是JavaScript访问浏览器的一个接口,又是ECMAScript上的Global对象。

(大型项目的开发过程中,及其不建议使用BOM操作方法,浏览器市场比较繁杂,所以直接操作浏览器的方法会带来很大的隐患 )

全局作用域中声明的所有变量和函数都是window对象的方法和属性,可以使用window点出的方式直接进行访问。这里在全局作用域中直接定义的属性就是window对象的方法,但是window对象直接创建的方法和这种全局作用域创建的还是有些不同:在全局作用域中定义的属性/方法不能通过delete方法直接删除,但是window对象直接定义的可以。

尝试访问未声明的变量会导致错误,但是通过查询window对象可以知道某个未声明变量是否存在。且在子函数中直接给未声明的变量赋值,该变量定义在全局中。

如果页面中包含框架,则每个框架都拥有自己的window对象,并保存在frames集合中。(不建议用这种方法,个人也从未见过企业官网用这种写法)

获取窗口位置

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

窗口大小:

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if(typeof pageWidth != “number”){
    if(document.compatMode == “CSS1Compat”){
	    pageWidth = document.documentElement.clicetWidth;
	    pageHeight = document.documentELement.cliceHeight;
	}else{
	    pageWidth = document.body.clientWidth;
	    pageHeight = docuemnt.body.clientHeight;
	}
}

也可以使用resizeTo()和resizeBy()方法调整浏览器窗口大小,但是这种方法可能被浏览器禁用,在框架中也是禁用的!

导航和打开窗口:

使用window.open()方法既可以导航到一个特定的URL,该方法接收四个参数:要加载的URL、窗口目标、一个特性字符串、新页面是否取代浏览器历史记录中当前加载页面的布尔值。
1.要加载的URL地址
2.窗口目标:topFrame、_self、_parent、_top、_blank
3.创建新标签/新窗口,不打开新窗口时会忽略第三个参数

间歇调用和超时调用:
JavaScript是单线程语言,两种时间代码执行方式,一种是时间达到后执行该代码,另一种是每隔一段时间执行一次该端代码。
setTimeout()方法,时间到达执行该段代码,第一个参数为要执行的代码,第二个参数为等待时间。因为JavaScript是一个单线程解释器,所以在一段时间内只能执行一段代码,所以为了控制要执行的代码,当当前代码马上要解析时,将当前的任务添加到队列里。
(传递字符串会导致性能损失,不建议使用字符串作为第一个参数)
setInterval()方法,每隔一段时间执行一次该代码。参数与上面的相同,并且这种方法一般不建议使用,更多的时候使用setTimeout()方法代替该方法使用。
同时里面存在两种方法:clearTimeout()方法、clearInterval()方法

function setTimeInter(){
    num++;
    if(num < max){
        setTimeout(setTimeInter, 500);       //其实就是一个迭代的过程
	}else{
         alter(“Done”);
	}
}

系统对话框:(这里使用chrome浏览器)
alert对话框:
alert对话框
confirm对话框:
confirm对话框
prompt对话框:
prompt对话框
location对象:

这个对象返回的参数主要集中在对于URL的反馈方面,且window.location和document.location返回的是同一个对象

function getQuery(){
    var qs = (location.search.length > 0 ? location.search.substring(1) : “”),
        args = {}, //存储
        items = qs.length ? qs.split(“&”) : [ ],  //以&分割
        item = null,
        name = null,
        value = null,
        i = 0,
        len = item.length;
        
   for(i = 0; i<length; i++){            //循环判断已经分割开的数组,再将其分为name和value
     item = items[i].split(“=”);
     name = decodeURIComponent(item[0]);
     value = decodeURIComponent(item[1]);
     if(name.length){
       args[name] = value; 				 //前面输入name,则返回value
		 }
	}
	return value;
}

Navigator对象:

在这里插入图片描述
在这里插入图片描述

function hasFlash(){                         //检测Flash
    var result = hasPlugin(“Flash”);
    if(!result){
   		result = hasIEPlugin(“ShokwaveFlash.ShockwaveFlash”);
	}
	return result;
}
function hasQuickTime(){                     //检测QuickTIme
    var result = hasPlugin(“QuickTime”);
    if(!result){
    	result = hasIEPlugin(“QuicjTime.QuickTime”);
	}
	return result;
}

histroy对象:
保存用户上网的历史记录,使用该对象的go()方法可以实现跳转,参数为数值,正数为前进,负数为倒退,或者直接添加特定网页,进行跳转。
该对象中还存在一个length属性,为历史记录的数量。

猜你喜欢

转载自blog.csdn.net/Feng_ye__/article/details/89513154
今日推荐