JS高级程序设计——BOM

时间：2022-12-19 19:18:18

window 对象

全局作用域

  • 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
  • 虽然有上述说法，但是定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。因为用var语句添加的window属性有一个[[Configurable]]的特性，值被设置为false。
  • 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

窗口关系及框架

  • 如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。
  • 每个window对象都有一个name属性，包含框架的名字。
    除非最高层窗口是通过window.open()打开的，否则其在window对象的name属性不会包含任何值。
  • top对象始终指向最高（外）层的框架，也就是浏览器窗口。
  • parent对象始终指向当前框架的直接上层框架。在没有框架的时候，parent==top。
  • self对象始终指向window。
<html>
<head>
</head>
<frameset rows="100,*">
<frame src="frame.htm" name="topFrame">//window.name=topFrame
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
            //可由window.frames[1]、window.frames["leftFrame"]、top.frames[1]、top.frames["leftFrame"]、frames[1]、frames["leftFrame"]来引用
<frame src="anotherframeset.htm" name="rightFrame">//这个框架包含了下述的框架集
</frameset>
</frameset>
</html>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">//parent.name=rightFrame
<frame src="blue.htm" name="blueFrame">
</frameset>

窗口位置

  • 确定位置：

    • screenLeft、screenTop属性：IE、Safari、Opera、Chrome

    • screenX、screenY属性：Firefox

      var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
      var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
  • 精确移动位置
    • moveTo()接收的是新位置的x、y坐标值。
    • moveBy()接收的是向右、下移动的像素数。
    • 这两个方法都不适用于框架，只能对最外层的window对象使用。

窗口大小

  • 确定大小

    • outerWidth和outerHeight在IE9、Safairi和Firefox中返回浏览器本身的尺寸。在Opera中，这两个属性表示页面视图容器的大小，而innerWidth和innerHeight则表示该容器页面视图区的大小（减去边框宽度），在Chrome中，返回相同的值。
    • IE、在Opera、Chrome、Safairi和Firefox中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息，在IE6中，这些在标准模式下才有效，如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight属性。
    var pageWidth=window.innerWidth;
    var 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;
        }//混乱模式下
    }
  • 调整大小
    • resizeTo()接收浏览器窗口的新宽度和新高度。
    • resizeBy()接收新窗口与原窗口的宽度和高度之差。
    • 这两个方法都不适用于框架，只能对最外层的window对象使用。

导航和打开窗口

  • window.open()使用
    • window.open(要加载的URL，窗口目标，一个特性字符串，表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)。
    • 该方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。返回指向新窗口的引用。
    • 通常只需传递第一个参数。
    • 如果传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数URL。
    • 如果第二个参数并不存在，则会根据第三个参数创建一个新窗口或者新标签页，如果没有第三个参数，则默认打开一个新浏览器窗口。
    • 第三个参数是以逗号分隔的名值对。
  • 有关
    • 新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。这个属性只在弹出窗口中的top层有定义。
    • 如果需要浏览器在独立的进程中运行每个标签页，需要将新创建的opener属性设置为null，即表示在单独的进程中运行新标签页。

  • 弹出窗口屏蔽程序

    • 如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很可能会返回null；如果是其他程序组织的，window.open()会抛出一个错误。
    var blocked=false;
    try{
    var wrox=window.open("http://www.wrox.com","_blank");
    if(wrox==null){
            blocked=true;
        }
    }
    catch(ex){
        blocked=true;
    }//try catch 表示当try中语句抛出错误时执行catch
    if(blocked){
        alert("the popup was blocked");
    }

间歇调用和超时调用

  • 超时调用

    • 表示在指定的时间过后执行代码。
    • setTimeout(要执行的代码，等待时间)
    • 第一个参数因为可能导致性能损失，所以建议函数。
    • 第二个参数表示过多长时间把当前任务添加到任务队列中，如果队列为空则立即执行，如果不为空，则需等待。
    • setTimeout()的返回值，是超时调用ID，是计划执行代码的唯一标识符，可以将它传给clearTimeout()来取消尚未执行的超时调用计划。
    var timeID=setTimeout(function(){
        alert("hello");
    },1000);
    clearTimeout(timeID);
  • 间歇调用
    • 表示每隔一段时间执行一次代码。
    • setInterval()
    • 使用与上述差不多。
    • 可以使用clearInterval(timeID)来取消。
  • 使用超时调用来模拟间歇调用是一种最佳模式。

系统对话框

  • alert()：警告对话框，包含传入的字符串和确定按钮。
  • confirm()：确认对话框，还显示了取消按钮。点击确定返回true，否则返回false。
  • prompt()：提示框，用于提示用户输入一些文本，会显示一个文本输入框。接收两个参数：要显示给用户的文本提示和文本输入域的默认值（可为空）。会返回用户输入的值，如果没有输入，则返回null。
  • 如果当前脚本在执行过程中会打开2个或2个以上的对话框，从第2个开始之后会显示一个复选框，以便用户组织后续的对话框显示，除非用户刷新页面。

location对象

  • 提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
  • 既是window对象的属性，也是document对象的属性。
  • 它还将URL解析为独立的片段，可以通过不同的属性访问这些片段。
  • location对象的所有属性：
    hash:返回#后跟0或多个字符，”#contents”
    host:返回服务器名称和端口号，”www.wrox.com:80”
    hostname:返回不带端口号的服务器名称，”www.wrox.com”
    href:返回完整的URL，tostring()方法也返回这个，”http:/www.wrox.com”
    port:返回端口号，如果没有返回空字符串，”8080”
    pathname:返回URL中的目录和文件名，”/WileyCDA”
    protocol:返回页面使用的协议，”http:”
    search:返回URL的查询字符串，以问号开头，”?q=javascript” 名值对

查询字符串

下面这个函数可以解析查询字符串，返回一个包含所有名值对的对象。
function getsearch(){
var qs=(location.search.length>0?location.search.substring(1):"");
    args={};
    items=qs.length?qs.split("&"):[];
    item=null;
    name=null;
    value=null;
for(var i=0;i<items.length;i++){
        item=items[i].split("=");
        name=decodeURLComponent(item[0]);//因为查询字符串应该是被编码过的，所以需要解码
        value=decodeURLComponent(item[1]);
if(name.length){
            args[name]=value;
        }
    }
return args;
}
//假设查询的字符串是?q=javascript&num=10
var args=getsearch();
alert(args["q"]);//javascript
alert(args["num"]);//10

位置操作

通过一些方式来改变浏览器的位置

  • location.assign(“URL”);//打开新URL并生成一条历史纪录。
  • window.location=”URL”等同于location.href=”URL”等同于上述。
  • location.hash=”#section1”；//更改hash部分
  • location.search
  • location.hostname
  • location.pathname
  • location.port
  • 以上方式都相同，且都会在历史纪录中生成一条新纪录。
  • 如果不想生成新记录，可以使用replace(“URL”)方法,这样之后用户是不能通过“后退”来回到前一个页面。
  • reload()重新加载页面，位于这之后的代码可能不会执行，所以最好这行代码放到最后。
location.reload();//有可能从缓存中加载
location.reload(true);//从服务器重新加载

navigator对象

是识别客户端浏览器的事实标准 。navigator对象的属性通常用于检测显示网页的浏览器类型。

检测插件

  • 非IE的浏览器使用plugins数组。数组中的每一项都包含四个属性：name（插件的名字），description（插件的描述），filename（插件的文件名），length（插件所处理的MIME类型数量）。
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;
}
alert(hasPlugin("Flash"));
  • 对于IE浏览器，只能使用ActiveObject类型，并尝试创建一个特定插件的实例，要想检测特定的插件，就必须知道其COM标识符。比如，Flash的标识符是ShockwaveFlash.ShockwaveFlash。
function hasIEPlugin(name){
try{
new ActiveObject(name);
return true;
    }catch(ex){
return false;
    }
}
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
  • 典型的做法是针对每个插件分别创建检测函数，而不是使用前面的通用检测方法。
function hasFlash(){
var result=hasPlugin("Flash");
if(!result){
        result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    }
return result;
}
alert(hasFlash());
  • plugins集合有一个名叫refresh()的方法，用于刷新plugins以反映最新安装的插件，参数为布尔值，true表示重新加载页面，更新集合；flase表示不加载页面，只更新集合。

注册处理程序

可以让一个站点指明它可以处理特定类型的信息

  • registerContentHandle();接收三个参数：要处理的MIME类型，可以处理该MIME类型的页面URL，应用程序的名称。
  • registerProtocolHandler();接收三个参数：要处理的协议，处理该协议的页面URL，应用程序的名称。

screen对象

表明客户端的能力，包括浏览器窗口外部的显示器的信息，如像素宽度和高度等

history对象

该对象保存着用户上网的历史纪录，从窗口被打开的那一刻算起

  • 因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history。
  • go()方法
history.go(1);//前进一页
history.go(2);//前进2页
history.go(-1);//后退1页
history.go("wrox.com");//跳转到历史纪录中最近的包含wrox.com字符串的第一个位置
  • back()和forward()后退和前进一页
  • history.length()保存着历史纪录的数量
标签：

相关文章