精华内容
下载资源
问答
  • bom浏览器对象模型

    2018-09-13 22:35:11
    bom浏览器对象模型,bom的一些常用属性跟方法,便于大家学习
  • 本文实例讲述了JavaScript浏览器对象模型BOM。分享给大家供大家参考,具体如下: window对象位于BOM层次结构的最顶层。它包含了一些非常重要的子对象,包括location,navigator,document,screen,history。...
  • 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准。 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的...
  • BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM...
  • JavaScript Window – 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准。 由于现代浏览器已经...
  • 本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法。分享给大家供大家参考,具体如下: 什么是BOM BOM:Browser Object Model,浏览器对象模型 从上图也可以看出: window对象是BOM的顶层(核心)对象,...
  • BOM(浏览器对象模型)

    千次阅读 多人点赞 2019-06-06 14:49:28
    所有浏览器都支持 window 对象,它表示浏览器窗口 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 全局变量是 window 对象的属性,全局函数是 window 对象的方法 甚至 HTML DOM 的 document ...

    Window对象

    所有浏览器都支持 window 对象,它表示浏览器窗口
    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
    全局变量是 window 对象的属性,全局函数是 window 对象的方法
    甚至 HTML DOM 的 document 也是 window 对象的属性之一
    window尺寸
    window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    window方法
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸

    定义全局变量与在 window 对象上直接定义属性差别
    1、全局变量不能通过 delete 操作符删除;而 window 属性上定义的变量可以通过 delete 删除

    var num=123;
    window.str="string";
    delete num;
    delete str;
    console.log(num); //123
    console.log(str); //str is not defined
    

    //全局变量不能通过 delete 删除,因为通过 var 定义全局变量会有一个名为 [Configurable] 的属性,默认值为 false,所以这样定义的属性不可以通过 delete 操作符删除
    2、访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。

    var newValue=oldValue; // 报错:oldValue is not defined
    var newValue=window.oldValue; // 不会报错
    console.log(newValue); // undefined
    

    3、有些自执行函数里面的变量,想要外部也访问到的话,在 window 对象上直接定义属性

    Window Screen

    window.screen 对象包含有关用户屏幕的信息
    Window Screen
    window.screen对象在编写时可以不使用 window 这个前缀。
    一些属性:
    screen.availWidth - 可用的屏幕宽度
    screen.availHeight - 可用的屏幕高度
    Window Screen 可用宽度
    screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏

    返回您的屏幕的可用宽度:

    <script>
    document.write("可用宽度: " + screen.availWidth);
    </script>
    

    Window Screen 可用高度
    screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
    返回您的屏幕的可用高度:

    <script>
    document.write("可用高度: " + screen.availHeight);
    </script>
    
    <script>
    document.write("总宽度/高度: ");
    document.write(screen.width + "*" + screen.height);
    document.write("<br>");
    document.write("可用宽度/高度: ");
    document.write(screen.availWidth + "*" + screen.availHeight);
    document.write("<br>");
    document.write("色彩深度: ");
    document.write(screen.colorDepth);
    document.write("<br>");
    document.write("色彩分辨率: ");
    document.write(screen.pixelDepth);
    </script>
    

    在这里插入图片描述
    Window Location
    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
    Window Location
    window.location 对象在编写时可不使用 window 这个前缀。

    属性描述
    location.hostname返回 web 主机的域名
    location.pathname返回当前页面的路径和文件名
    location.port返回 web 主机的端口 (80 或 443
    location.protocol返回所使用的 web 协议(http: 或 https:)
    location.href返回当前页面的 URL
    location.assign()方法加载新的文档

    返回(当前页面的)整个 URL:

    <script>
    document.write(location.href);
    </script>
    

    加载一个新的文档:

    <script>
    function newDoc(){
        window.location.assign("https://www.yjn.cn/doc/index.txt")
    }
    </script>
    <body>
    <input type="button" value="加载新文档" onclick="newDoc()">
    </body>
    

    Window History

    window.history 对象包含浏览器的历史。
    window.history对象在编写时可不使用 window 这个前缀。
    为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
    一些方法:
    history.back() - 与在浏览器点击后退按钮相同
    history.forward() - 与在浏览器中点击向前按钮相同
    Window History Back
    history.back() 方法加载历史列表中的前一个 URL。
    这与在浏览器中点击后退按钮是相同的:
    在页面上创建后退按钮:

    <script>
        function goBack()
        {
            window.history.back()
        }
    </script>
    <body>
    <input type="button" value="Back" onclick="goBack()">
    </body>
    </html>
    

    history forward() 方法加载历史列表中的下一个 URL。
    这与在浏览器中点击前进按钮是相同的:
    在页面上创建一个向前的按钮:

    <script>
    function goForward()
    {
        window.history.forward()
    }
    </script>
    <body>
    <input type="button" value="Forward" onclick="goForward()">
    </body>
    

    除此之外可以用 history.go() 这个方法来实现向前,后退的功能。

    function a(){
        history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
    }
    function b(){
        history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
    }
    

    Window Navigator

    window.navigator 对象包含有关访问者浏览器的信息。
    window.navigator 对象在编写时可不使用 window 这个前缀。

    <div id="example"></div>
    <script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
    </script>
    

    来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
    navigator 数据可被浏览器使用者更改
    一些浏览器对测试站点会识别错误
    浏览器无法报告晚于浏览器发布的新操作系统

    JavaScript 弹窗

    可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
    警告框
    警告框经常用于确保用户可以得到某些信息。
    当警告框出现后,用户需要点击确定按钮才能继续进行操作。

    window.alert("sometext");
    window.alert() 方法可以不带上window对象,直接使用alert()方法。
    

    确认框
    确认框通常用于验证是否接受用户操作
    当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作
    当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

    window.confirm("sometext");
    window.confirm() 方法可以不带上window对象,直接使用confirm()方法。
    var r=confirm("按下按钮");
    if (r==true)
    {
        x="你按下了\"确定\"按钮!";
    }
    else
    {
        x="你按下了\"取消\"按钮!";
    }
    

    提示框
    提示框经常用于提示用户在进入页面前输入某个值。
    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

    window.prompt("sometext","defaultvalue");
    window.prompt() 方法可以不带上window对象,直接使用prompt()方法。
    var person=prompt("请输入你的名字","Harry Potter");
    if (person!=null && person!="")
    {
        x="你好 " + person + "! 今天感觉如何?";
        document.getElementById("demo").innerHTML=x;
    }
    

    弹窗使用 \ + “n”(\n) 来设置换行。

    JavaScript 计时事件

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
    在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
    setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    setTimeout() - 在指定的毫秒数后执行指定代码。
    注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法
    setInterval() 方法
    window.setInterval(“javascript function”,milliseconds);
    window.setInterval() 方法可以不使用 window 前缀,直接使用函数 setInterval()。
    setInterval() 第一个参数是函数(function)。
    第二个参数间隔的毫秒数
    注意: 1000 毫秒是一秒。
    每三秒弹出 “hello” :

    setInterval(function(){alert("Hello")},3000);
    

    实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。
    以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。

    显示当前时间

    var myVar=setInterval(function(){myTimer()},1000);
     
    function myTimer()
    {
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    

    如何停止执行?
    clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

    window.clearInterval(intervalVariable)
    window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

    要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
    myVar=setInterval(“javascript function”,milliseconds);
    然后你可以使用 clearInterval() 方法来停止执行。

    <p id="demo"></p>
    <button onclick="myStopFunction()">停止</button>
    <script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    function myStopFunction(){
        clearInterval(myVar);
    }
    </script>
    

    setTimeout() 方法
    语法
    myVar= window.setTimeout(“javascript function”, milliseconds);
    setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”,或者对函数的调用,诸如 alertMsg。
    第二个参数指示从当前起多少毫秒后执行第一个参数。
    等待3秒,然后弹出 “Hello”:
    setTimeout(function(){alert(“Hello”)},3000);
    如何停止执行?
    clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
    window.clearTimeout(timeoutVariable)
    window.clearTimeout() 方法可以不使用window 前缀。
    要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
    myVar=setTimeout(“javascript function”,milliseconds);
    如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
    以下是同一个实例, 但是添加了 “Stop the alert” 按钮:

    var myVar;
     
    function myFunction()
    {
        myVar=setTimeout(function(){alert("Hello")},3000);
    }
     
    function myStopFunction()
    {
        clearTimeout(myVar);
    }
    

    JavaScript Cookie

    Cookie 用于存储 web 页面的用户信息。
    什么是 Cookie?
    Cookie 是一些数据, 存储于你电脑上的文本文件中。
    当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
    Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
    当用户访问 web 页面时,他的名字可以记录在 cookie 中。
    在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
    Cookie 以名/值对形式存储,如下所示:
    username=John Doe
    当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
    使用 JavaScript 创建Cookie
    JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
    JavaScript 中,创建 cookie 如下所示:
    document.cookie=“username=John Doe”;
    您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
    document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT”;
    您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
    document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
    使用 JavaScript 读取 Cookie
    在 JavaScript 中, 可以使用以下代码来读取 cookie:
    var x = document.cookie;
    Note document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
    使用 JavaScript 修改 Cookie
    在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:
    document.cookie=“username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
    旧的 cookie 将被覆盖。
    使用 JavaScript 删除 Cookie
    删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
    document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
    注意,当您删除时不必指定 cookie 的值。
    Cookie 字符串
    document.cookie 属性看起来像一个普通的文本字符串,其实它不是。
    即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。
    如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:
    cookie1=value; cookie2=value;
    显示所有 Cookie 创建 Cookie 1 创建 Cookie 2 删除 Cookie 1 删除 Cookie 2
    如果您需要查找一个指定 cookie 值,您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。
    JavaScript Cookie 实例
    在以下实例中,我们将创建 cookie 来存储访问者名称。
    首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。
    访问者下一次访问页面时,他会看到一个欢迎的消息。
    在这个实例中我们会创建 3 个 JavaScript 函数:
    设置 cookie 值的函数
    获取 cookie 值的函数
    检测 cookie 值的函数
    设置 cookie 值的函数
    首先,我们创建一个函数用于存储访问者的名字:

    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    

    函数解析:
    以上的函数参数中,cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。
    该函数设置了 cookie 名、cookie 值、cookie过期时间。
    获取 cookie 值的函数
    然后,我们创建一个函数用户返回指定 cookie 的值:

    function getCookie(cname)
    {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++) 
      {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
      }
      return "";
    }
    

    函数解析:
    cookie 名的参数为 cname。
    创建一个文本变量用于检索指定 cookie :cname + “=”。
    使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(’;’))。
    循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。
    如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。
    如果没有找到 cookie, 返回 “”。
    检测 cookie 值的函数
    最后,我们可以创建一个检测 cookie 是否创建的函数。
    如果设置了 cookie,将显示一个问候信息。
    如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

    function checkCookie()
    {
      var username=getCookie("username");
      if (username!="")
      {
        alert("Welcome again " + username);
      }
      else 
      {
        username = prompt("Please enter your name:","");
        if (username!="" && username!=null)
        {
          setCookie("username",username,365);
        }
      }
    }
    
    展开全文
  • 浏览器对象模型(Browser Object Model)

    千次阅读 2018-03-01 11:56:33
    BOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象...

    什么是BOM?

    • BOM是Browser Object Model的缩写,简称浏览器对象模型
    • BOM提供了独立于内容而与浏览器窗口进行交互的对象
    • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
    • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
    • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化)
    • BOM最初是Netscape浏览器标准的一部分

    基本的BOM体系结构图

    能利用BOM做什么?

    BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

    window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象,例如下面两行代码是一样的:

        document.write("BOM");
        window.document.write("BOM");

     

    window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。

    JavaScript中的任何一个全局函数或变量都是window的属性

    window子对象

    • document 对象
    • frames 对象
    • history 对象
    • location 对象
    • navigator 对象
    • screen 对象

    window对象关系属性

    • parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
    • self :指向当前的window对象,与window同意。 (window对象)
    • top :如果当前窗口为frame,指向包含该frame的top-level的window对象
    • window :指向当前的window对象,与self同意。
    • opener :当窗口是用javascript打开时,指向打开它的那人窗口(开启者)

    window对象定位属性

    • IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性。
    • Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

    window对象的方法

    窗体控制
    moveBy(x,y)——从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
    moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域
    resizeBy(w,h)——相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
    resizeTo(w,h)——把窗体宽度调整为w个像素,高度调整为h个像素
    窗体滚动轴控制
    scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
    scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
    窗体焦点控制
    focus()—— 使窗体或控件获取焦点
    blur()——与focus函数相反,使窗体或控件失去焦点
    新建窗体
    open()——打开(弹出)一个新的窗体
    close()——关闭窗体
    opener属性——新建窗体中对父窗体的引用,中文"开启者"的意思

    window.open方法语法

        window.open(url, name, features, replace);

     

    open方法参数说明

    • url -- 要载入窗体的URL
    • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
    • features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔
    • replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定

    open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口

    参数名称类型说明
    heightNumber设置窗体的高度,不能小于100
    leftNumber说明创建窗体的左坐标,不能为负值
    locationBoolean窗体是否显示地址栏,默认值为no
    resizableBoolean窗体是否允许通过拖动边线调整大小,默认值为no
    scrollbarsBoolean窗体中内部超出窗口可视范围时是否允许拖动,默认值为no
    toolbarBoolean窗体是否显示工具栏,默认值为no
    topNumber说明创建窗体的上坐标,不能为负值
    statusBoolean窗体是否显示状态栏,默认值为no
    widthNumber创建窗体的宽度,不能小于100

      特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

    open方法返回值为一个新窗体的window对象的引用

    对话框
    alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)
    confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按钮与“取消”按钮)
    prompt(str,defaultValue)——弹出消息对话框(对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框),由于各个浏览器实现的不同,若没有第二个参数(文本框中的默认值)时也最好提供一个空字符串
    状态栏
    window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时),浏览器底部的区域称为状态栏,用于向用户显示信息
    window.status 属性——临时改变浏览器状态栏的显示
    时间等待与间隔函数
    setTimeout()—— 暂停指定的毫秒数后执行指定的代码
    clearTimeout()——取消指定的setTimeout函数将要执行的代码
    setInterval()——间隔指定的毫秒数不停地执行指定的代码
    clearInterval()——取消指定的setInterval函数将要执行的代码

    setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

        var tid = setTimeout("alert('1')",1000);
        alert(tid);
        clearTimeout(tid);

     

    History对象,在浏览器历史记录中导航

    History 对象的属性:length 返回浏览器历史列表中的 URL 数量

    History 对象的方法

    • back() 加载 history 列表中的前一个 URL
    • forward() 加载 history 列表中的下一个 URL
    • go(num) 加载 history 列表中的某个具体页面

    Location 对象

    Location 对象的属性

    • hash 设置或返回从井号 (#) 开始的 URL(锚)
    • host 设置或返回主机名和当前 URL 的端口号
    • hostname 设置或返回当前 URL 的主机名
    • href 设置或返回完整的 URL
    • pathname 设置或返回当前 URL 的路径部分
    • port 设置或返回当前 URL 的端口号
    • protocol 设置或返回当前 URL 的协议
    • search 设置或返回从问号 (?) 开始的 URL(查询部分)

    Location 对象的方法

    • assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
    • reload() 重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
    • replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。

    Navigator对象

    Navigator 对象的属性

    • appCodeName 返回浏览器的代码名
    • appName 返回浏览器的名称
    • appVersion 返回浏览器的平台和版本信息
    • browserLanguage 返回当前浏览器的语言
    • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
    • cpuClass 返回浏览器系统的 CPU 等级
    • onLine 返回指明系统是否处于脱机模式的布尔值
    • platform 返回运行浏览器的操作系统平台
    • systemLanguage 返回 OS 使用的默认语言
    • userAgent 返回由客户机发送服务器的 user-agent 头部的值
    • userLanguage 返回 OS 的自然语言设置

    框架与多窗口通信

    子窗口与父窗口

    只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中,可以通过window.open方法的返回值来访问打开的窗口!

    框架

    window.frames集合:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

        alert(frames.length);//框架的数目
        alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
        //不但可以使用下标,还可以使用frame标签的name属性
        alert(frames["frame1"].document.title);

     

    在框架集中还可以使用ID来获取子窗口的引用

        var frame1 =document.getElementById("frame1");//这样只是获取了标签
        var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
        //还可以直接获取框架中document的引用
        var frameDoc = frame1.contentDocument;
        alert(frameDoc);//但IE不支持contentDocument属性

     

    子窗口访问父窗口——window对象的parent属性

    子窗口访问顶层——window对象的top属性

    浏览器检测

    市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了,主要分为两种:1.userAgent字符串检测,2.对象检测;当然,也不能考虑所有的浏览器,我们需要按照客户需求来,如果可以确信浏览网站的用户都使用或大部分使用IE浏览器,那么你大可放心的使用IE专有的那些丰富的扩展,当然,一旦用户开始转向另一个浏览,那么痛苦的日子便开始了。下面是市场上的主流浏览器列表:

    • Internet Explorer
    • Mozilla Firefox
    • Google Chrome
    • Opera
    • Safari

    注意,浏览器总是不断更新,我们不但要为多种浏览器作兼容处理,还要对同一浏览器多个版本作兼容处理。比如IE浏览器,其6.0版本和7.0版本都很流行,因为微软IE随着操作系统绑定安装(之前也是同步发行,微软平均每两年推出一款个人桌面,同样IE也每两年更新一次;直到现在,由于火狐的流行,IE工作组才加快IE的更新),所以更新的较慢,6.0版和7.0版有很大差别。

    市场上还存在一些其它浏览器,但由于它们都是使用的上面所列浏览器的核心,或与上面浏览器使用了相同的解释引擎,所以无需多作考虑。下面是主流的浏览器解释引擎列表:

    1. Trident

      Trident (又称为MSHTML),是微软的窗口操作系统(Windows)搭载的网页浏览器—Internet Explorer的排版引擎的名称,它的第一个版本随着1997年10月Internet Explorer第四版释出,之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中,微软将对Trident排版引擎做了的重大的变动,除了加入新的技术之外,并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎。使用该引擎的主要浏览器:IE,TheWorld,MiniIE,Maxthon,腾讯TT浏览器。事实上,这些浏览器是直接使用了IE核心,因为其userAgent字符串中返回的信息与IE是一模一样的!

    2. Gecko

      壁虎,英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容,并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用,包括若干浏览器,例如Firefox、Mozilla Suite、Camino,Seamonkey等等

    3. Presto

      Presto是一个由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出,使不少错误得以修正,以及阅读Javascript效能得以最佳化,并成为速度最快的引擎。

    4. KHTML

      是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品,如:WebKit,WebCore引擎

    利用userAgent检测

    下面是各大浏览器使用弹窗显示的userAgent字符串

    IE浏览器:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

    火狐浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

    Opera浏览器:Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

    Safari浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

    Google Chrome浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

    可以使用下面的代码进行浏览器检测

        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")!=-1,
            isFF:navigator.userAgent.indexOf("Firefox")!=-1,
            isOpera:navigator.userAgent.indexOf("Opera")!=-1,
            isSafari:navigator.userAgent.indexOf("Safari")!=-1
        };

     

    但这样做并不是万无一失的,一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent:Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64;在完全伪装的情况下,最后的“Opera 9.64”这个字符串也不会出现,但Opera也有特殊的识别自身的方法,它会自动声明一个opera全局变量!

    不但如此,我们的检测还忽略了一点,就是那些使用相同引擎而品牌不同的浏览器,所以,直接检测浏览器是没有必要的,检测浏览器的解释引擎才是有必要的!

    复制代码
        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
            isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
            && navigator.userAgent.indexOf("KHTML") ==-1,
            isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
            isOpera:navigator.userAgent.indexOf("Opera")>-1
        };
    展开全文
  • 浏览器对象模型bom的作用是什么? 零、总结 1、BOM提供了独立于内容而与浏览器窗口进行交互的对象 2、BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,...

    浏览器对象模型bom的作用是什么?

    零、总结

    1、BOM提供了独立于内容而与浏览器窗口进行交互的对象

    2、BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象以使得我们可以通过这个入口来使用DOM的强大功能!!!

     

    一、什么是BOM?

    • BOM是Browser Object Model的缩写,简称浏览器对象模型
    • BOM提供了独立于内容而与浏览器窗口进行交互的对象
    • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
    • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
    • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化)
    • BOM最初是Netscape浏览器标准的一部分

    基本的BOM体系结构图

    二、能利用BOM做什么?

    BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象以使得我们可以通过这个入口来使用DOM的强大功能!!!

    window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象,例如下面两行代码是一样的:

        document.write("BOM");
        window.document.write("BOM");

     

    window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。

    JavaScript中的任何一个全局函数或变量都是window的属性

    window子对象

    • document 对象
    • frames 对象
    • history 对象
    • location 对象
    • navigator 对象
    • screen 对象

    window对象关系属性

    • parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
    • self :指向当前的window对象,与window同意。 (window对象)
    • top :如果当前窗口为frame,指向包含该frame的top-level的window对象
    • window :指向当前的window对象,与self同意。
    • opener :当窗口是用javascript打开时,指向打开它的那人窗口(开启者)

    window对象定位属性

    • IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性。
    • Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

    1、window对象的方法

    窗体控制
    moveBy(x,y)——从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
    moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域
    resizeBy(w,h)——相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
    resizeTo(w,h)——把窗体宽度调整为w个像素,高度调整为h个像素
    窗体滚动轴控制
    scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
    scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
    窗体焦点控制
    focus()—— 使窗体或控件获取焦点
    blur()——与focus函数相反,使窗体或控件失去焦点
    新建窗体
    open()——打开(弹出)一个新的窗体
    close()——关闭窗体
    opener属性——新建窗体中对父窗体的引用,中文"开启者"的意思

    window.open方法语法

        window.open(url, name, features, replace);

     

    open方法参数说明

    • url -- 要载入窗体的URL
    • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
    • features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔
    • replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定

    open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口

    参数名称类型说明
    heightNumber设置窗体的高度,不能小于100
    leftNumber说明创建窗体的左坐标,不能为负值
    locationBoolean窗体是否显示地址栏,默认值为no
    resizableBoolean窗体是否允许通过拖动边线调整大小,默认值为no
    scrollbarsBoolean窗体中内部超出窗口可视范围时是否允许拖动,默认值为no
    toolbarBoolean窗体是否显示工具栏,默认值为no
    topNumber说明创建窗体的上坐标,不能为负值
    statusBoolean窗体是否显示状态栏,默认值为no
    widthNumber创建窗体的宽度,不能小于100

      特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

    open方法返回值为一个新窗体的window对象的引用

    对话框
    alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)
    confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按钮与“取消”按钮)
    prompt(str,defaultValue)——弹出消息对话框(对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框),由于各个浏览器实现的不同,若没有第二个参数(文本框中的默认值)时也最好提供一个空字符串
    状态栏
    window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时),浏览器底部的区域称为状态栏,用于向用户显示信息
    window.status 属性——临时改变浏览器状态栏的显示
    时间等待与间隔函数
    setTimeout()—— 暂停指定的毫秒数后执行指定的代码
    clearTimeout()——取消指定的setTimeout函数将要执行的代码
    setInterval()——间隔指定的毫秒数不停地执行指定的代码
    clearInterval()——取消指定的setInterval函数将要执行的代码

    setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

        var tid = setTimeout("alert('1')",1000);
        alert(tid);
        clearTimeout(tid);

     

    2、History对象,在浏览器历史记录中导航

    History 对象的属性:length 返回浏览器历史列表中的 URL 数量

    History 对象的方法

    • back() 加载 history 列表中的前一个 URL
    • forward() 加载 history 列表中的下一个 URL
    • go(num) 加载 history 列表中的某个具体页面

    3、Location 对象

    Location 对象的属性

    • hash 设置或返回从井号 (#) 开始的 URL(锚)
    • host 设置或返回主机名和当前 URL 的端口号
    • hostname 设置或返回当前 URL 的主机名
    • href 设置或返回完整的 URL
    • pathname 设置或返回当前 URL 的路径部分
    • port 设置或返回当前 URL 的端口号
    • protocol 设置或返回当前 URL 的协议
    • search 设置或返回从问号 (?) 开始的 URL(查询部分)

    Location 对象的方法

    • assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
    • reload() 重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
    • replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。

    4、Navigator对象

    Navigator 对象的属性

    • appCodeName 返回浏览器的代码名
    • appName 返回浏览器的名称
    • appVersion 返回浏览器的平台和版本信息
    • browserLanguage 返回当前浏览器的语言
    • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
    • cpuClass 返回浏览器系统的 CPU 等级
    • onLine 返回指明系统是否处于脱机模式的布尔值
    • platform 返回运行浏览器的操作系统平台
    • systemLanguage 返回 OS 使用的默认语言
    • userAgent 返回由客户机发送服务器的 user-agent 头部的值
    • userLanguage 返回 OS 的自然语言设置

    三、框架与多窗口通信

    1、子窗口与父窗口

    只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中,可以通过window.open方法的返回值来访问打开的窗口!

    2、框架

    window.frames集合:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

        alert(frames.length);//框架的数目
        alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
        //不但可以使用下标,还可以使用frame标签的name属性
        alert(frames["frame1"].document.title);

     

    在框架集中还可以使用ID来获取子窗口的引用

        var frame1 =document.getElementById("frame1");//这样只是获取了标签
        var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
        //还可以直接获取框架中document的引用
        var frameDoc = frame1.contentDocument;
        alert(frameDoc);//但IE不支持contentDocument属性

     

    3、子窗口访问父窗口——window对象的parent属性

    4、子窗口访问顶层——window对象的top属性

    四、浏览器检测

    市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了,主要分为两种:1.userAgent字符串检测,2.对象检测;当然,也不能考虑所有的浏览器,我们需要按照客户需求来,如果可以确信浏览网站的用户都使用或大部分使用IE浏览器,那么你大可放心的使用IE专有的那些丰富的扩展,当然,一旦用户开始转向另一个浏览,那么痛苦的日子便开始了。下面是市场上的主流浏览器列表:

    • Internet Explorer
    • Mozilla Firefox
    • Google Chrome
    • Opera
    • Safari

    注意,浏览器总是不断更新,我们不但要为多种浏览器作兼容处理,还要对同一浏览器多个版本作兼容处理。比如IE浏览器,其6.0版本和7.0版本都很流行,因为微软IE随着操作系统绑定安装(之前也是同步发行,微软平均每两年推出一款个人桌面,同样IE也每两年更新一次;直到现在,由于火狐的流行,IE工作组才加快IE的更新),所以更新的较慢,6.0版和7.0版有很大差别。

    市场上还存在一些其它浏览器,但由于它们都是使用的上面所列浏览器的核心,或与上面浏览器使用了相同的解释引擎,所以无需多作考虑。下面是主流的浏览器解释引擎列表:

    1. Trident

      Trident (又称为MSHTML),是微软的窗口操作系统(Windows)搭载的网页浏览器—Internet Explorer的排版引擎的名称,它的第一个版本随着1997年10月Internet Explorer第四版释出,之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中,微软将对Trident排版引擎做了的重大的变动,除了加入新的技术之外,并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎。使用该引擎的主要浏览器:IE,TheWorld,MiniIE,Maxthon,腾讯TT浏览器。事实上,这些浏览器是直接使用了IE核心,因为其userAgent字符串中返回的信息与IE是一模一样的!

    2. Gecko

      壁虎,英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容,并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用,包括若干浏览器,例如Firefox、Mozilla Suite、Camino,Seamonkey等等

    3. Presto

      Presto是一个由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出,使不少错误得以修正,以及阅读Javascript效能得以最佳化,并成为速度最快的引擎。

    4. KHTML

      是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品,如:WebKit,WebCore引擎

    1、利用userAgent检测

    下面是各大浏览器使用弹窗显示的userAgent字符串

    IE浏览器:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

    火狐浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

    Opera浏览器:Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

    Safari浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

    Google Chrome浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

    可以使用下面的代码进行浏览器检测

        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")!=-1,
            isFF:navigator.userAgent.indexOf("Firefox")!=-1,
            isOpera:navigator.userAgent.indexOf("Opera")!=-1,
            isSafari:navigator.userAgent.indexOf("Safari")!=-1
        };

     

    但这样做并不是万无一失的,一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent:Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64;在完全伪装的情况下,最后的“Opera 9.64”这个字符串也不会出现,但Opera也有特殊的识别自身的方法,它会自动声明一个opera全局变量!

    不但如此,我们的检测还忽略了一点,就是那些使用相同引擎而品牌不同的浏览器,所以,直接检测浏览器是没有必要的,检测浏览器的解释引擎才是有必要的

        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
            isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
            && navigator.userAgent.indexOf("KHTML") ==-1,
            isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
            isOpera:navigator.userAgent.indexOf("Opera")>-1
        };

     

    五、测试题-简答题

    1、BOM是什么的缩写,简称是什么?

    解答:BOM是Browser Object Model的缩写,简称浏览器对象模型

    2、BOM提供了独立于内容而与浏览器窗口进行交互的对象,这句话对么?

    解答:对。

    3、为什么BOM的核心对象是window?

    解答:由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。

    4、BOM的常用功能有哪些?

    解答:BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

    5、window对象代表一个页面窗口还是整个浏览器窗口?

    解答:window对象表示整个浏览器窗口,但不必表示其中包含的内容

    6、window可以移动或调整它表示的浏览器的大小,这句话对么?

    解答:对。

    7、JavaScript中的任何一个全局函数或变量都是window的属性,这句话对么?

    解答:对。

    8、JavaScript和BOM中window对象的关系是什么?

    解答:JavaScript中的任何一个全局函数或变量都是window的属性

    9、解释window.open方法中语法中的每个字段的意思--window.open(url, name, features, replace);?

    解答:

    open方法参数说明

    • url -- 要载入窗体的URL
    • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
    • features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔。比如height,left,top等等
    • replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定

    10、window.open(url, name, features, replace);中的features字段格式有什么要求?

    解答:特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

    features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔。比如height,left,top等等

    11、history对象的go方法怎么使用?

    解答:go(num) 加载 history 列表中的某个具体页面。

    12、BOM中什么样的窗口才能被JavaScript访问?

    解答:只有自身和使用window.open方法打开的窗口和才能被JavaScript访问

    13、window.open方法通过什么属性来访问打开窗口的父窗口?

    解答:window.open方法打开的窗口通过window.opener属性来访问父窗口。

    14、BOM中,在opener窗口中,可以通过什么方法的返回值来访问打开的窗口?

    解答:window.open方法的返回值

    15、window.frames集合是什么?

    解答:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

    16、window.frames集合的对象时使用了框架集或包含iframe标签的页面,这句话对么?

    解答:对

    17、哪两种情况下window.frames集合有值?

    解答:a、页面使用了框架集  b、页面使用了iframe标签

    18、如何查看一个页面框架的数量?

    解答:alert(frames.length);//框架的数目

    19、BOM中子窗口如何访问父窗口?

    解答:window对象的parent属性

    20、BOM中子窗口如何访问顶层窗口?

    解答:window对象的top属性

    21、解决浏览器兼容问题一般通过检测浏览器来实现,那么检测浏览器的那种主要方法是什么?

    解答:1.userAgent字符串检测,2.对象检测;

    22、浏览器能够伪装自己的userAgent属性么?

    解答:能,一个特例便是Opera可以使用userAgent伪装自己。

    23、因为浏览器能够伪装自己的userAgent属性和使用相同引擎而品牌不同的浏览器,所以检测浏览器最直接有效的方式是什么?

    解答:检测浏览器的解释引擎。

     

    展开全文
  • 浏览器中常用内置对象之Window引言正文一、Window对象的方法(1)计时器(2)打开窗口和关闭窗口二、Window对象的属性 引言 我们从这一篇开始逐个讲解浏览器上的内置对象的属性和方法。常见的浏览器内置对象有:...

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法

    引言

    浏览器为我们提供了JavaScript运行的环境,同时也给我们提供了很多的对象,我们从这一篇开始逐个讲解浏览器上的内置对象的属性和方法。常见的浏览器内置对象有:Window 、Location 、Navigator 、History 、Screen……
    本篇文章,我们就从最大的对象Window开始讲起,在本文的最后还附带讲述其它几个对象的文章链接

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    正文

    Window对象在客户端JavaScript中扮演着核心的角色,它是客户端的一个全局内置对象。我们可以使用 window 来引用这个对象,比如当我们打开一个网页,window 就代表这个网页;如果打开多个页面,则他们都有各自的 window 且互不相同。

    一、Window对象的方法

    (1)计时器

    我们一定见过这样两个函数,setTimeout()setInterval(),它们就是我们常说到计时器函数。其实这两个函数是被定义在客户端的一个全局函数,所以也可以理解为就是Window对象的一个方法,所以我们可以这样引用 window.setTimeout(),当然也可以省略 window,直接 setTimeout()

    那么setTimeout()setInterval()这两个函数是干什么的呢?简单点来说就是在指定时间之后调用设定的函数,前者是调用一次,后者是反复不停地调用。

    • setTimeout()

    该函数需要传入两个参数,第一个参数是一个函数,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒

    //创建了一个定时器,1秒后会打印 `执行了一次`
    setTimeout(function() {
    	console.log('执行了一次')
    },1000)
    
    //执行了一次
    

    我们可以看到,传入的函数只执行了一次

    • setInterval()

    该函数也需要传入两个参数,第一个参数是一个函数,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒

    //创建了一个定时器,每过1秒后都会打印 `执行了一次`
    setInterval(function() {
    	console.log('执行了一次')
    },1000)
    
    //执行了一次
    //执行了一次
    //执行了一次
    //  …………
    

    我们可以看到,传入的函数一直在执行,因为这个函数作用就是在指定时间后反复执行。那如何让它停止呢?其实还有两个函数是专门用来清除定时器的,那就是 clearTimeout()clearInterval()

    • clearTimeout() 和 clearInterval()

    看这两个函数的名字我们就知道是用来清除定时器的,那么如何使用呢?我们只需在创建定时器的时候,将定时器返回给一个变量,再将该变量传入clearTimeout()clearInterval() 就可以清除对应的定时器啦。

    我们就拿其中一个函数来举个例子吧

    let count = 0
    let timer = setInterval(function() {
    				count ++
    				console.log('执行了' + count + '次')
    				if(count === 5) {
    					clearInterval(timer)
    				}
    			
    			},1000)
    
    //执行了1次
    //执行了2次
    //执行了3次
    //执行了4次
    //执行了5次
    

    上述例子创建了一个反复调用的定时器,并返回给变量timer,每过1秒,变量count + 1 ,并打印一次,同时判断count是否等于5,如果等于5,就调用clearInterval() 函数,并把变量timer作为参数,用于清除这个设定的定时器。所以本应该反复无限执行的定时器,在执行了5次以后就被清除掉了。

    补充:定时器的执行是一种异步操作,也就是说它不会阻塞接下来的代码执行,我们来看一个例子

    setTimeout(function() {
    	console.log('内部已执行')
    },1000)
    console.log('外部已执行')
    
    //外部已执行
    //内部已执行
    

    我们可以看到,从上到下解析下来,先执行了最后一行的代码,再执行了定时器传入的函数。这就是因为定时器是一种异步操作,所以我们来看一种特殊的情况,这个一定要注意了

    setTimeout(function() {
    	console.log('内部已执行')
    },0)
    console.log('外部已执行')
    
    //外部已执行
    //内部已执行
    

    我们可以看到,虽然我们指定的时间是0秒,但仍然是先执行了最后一行的代码,再执行了定时器传入的函数。

    (2)打开窗口

    Window对象有一个 open() 方法,该方法可以打开一个新的浏览器窗口,并返回打开那个窗口的Window对象。

    open() 方法共有4个可选的参数:

    1. 第一个参数是即将打开的新窗口的URL,若没有该参数,则打开一个空白页

    2. 第二个参数是即将打开的新窗口的名字。若没有该参数,则会使用指定的名字 _blank 打开一个新的 、未命名的窗口

    3. 第三个参数是一个字符串,字符串里是 属性名1=值1, 属性名2=值2 这样的形式,用来设置新打开窗口的一些状态样式。

    4. 第四个参数是在第二个参数设置为一个已存在的窗口名时才生效,该参数为布尔值,当为true时,第一个参数的URL会替换掉窗口浏览历史的当前条目;当为false时,会在窗口浏览历史中创建一个新的条目

    接下来我们来讲解这四个参数是如何使用的:

    • 第一个参数

    这个参数很好理解,比如我们传入 http://www.baidu.com ,则会跳转到百度页面,如果我们省略这个参数,则会打开一个空白页,如下图。
    在这里插入图片描述

    • 第二个参数

    这个参数是为我们打开的新窗口命名的。例如,我们设置该参数为 newWindow,第一次调用 open() 函数,会去查看当前浏览器是否有一个窗口名字叫做newWindow,若没有则会打开一个名为 newWindow 的窗口,那当我们第二次调用 open() 函数时,同样也会去查看当前浏览器是否有一个窗口名字叫做newWindow,因为第一次调用的时候打开了一个这样的窗口,所以我们浏览器只是会跳转到刚刚打开的那个页面。

    我们来看一下例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn">调用open函数</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
        	//打开一个空白窗口,并命名为newWindow
            window.open('', 'newWindow')
        }
    </script>
    </body>
    </html>
    

    动图展示
    在这里插入图片描述

    • 第三个参数

    该参数是是一个字符串,字符串里是 属性名1=值1, 属性名2=值2 这样的形用于设置新打开的窗口的一些样式的,比如窗口大小 、是否具有菜单栏 、状态栏 、工具栏等

    我们来看一个简单的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn">调用open函数</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
        	//打开一个没有名字的空白窗口,窗口大小为400 * 350
            window.open('', '', 'width=400, height=350')
        }
    </script>
    </body>
    </html>
    

    动图展示
    在这里插入图片描述
    还有很多属性可以设置,我直接列出来一些常用的属性,大家可以自行测试

    属性名含义
    height窗口的高度,最小值为100
    width窗口的宽度,最小值为100
    toolbar表示是否显示窗口的工具栏。yes/no,默认为yes
    status是否要添加一个状态栏。yes/no,默认为yes
    scrollbars是否显示滚动条。yes/no,默认为yes
    resizable是否可调整窗口大小。yes/no,默认为yes
    menubar是否显示菜单栏。yes/no,默认为yes
    location是否显示地址字段。yes/no,默认为yes

    还有一些值,如果大家感兴趣可以去自己查询一下。

    • 第四个参数

    这个参数我暂时是没有看出有什么实际的用处,如果大家有知道的可以评论区告诉我。

    我们在刚开始说过,window.open() 会返回打开那个窗口的Window对象,这就意味着我们可以控制那个打开的窗口,比如这样

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">控制新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let new_window = null
        btn1.onclick = function () {
        	//将新打开的窗口的window对象返回给变量new_window
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//在原窗口控制新打开的窗口弹出弹框
            new_window.alert('弹出弹窗')
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    (3)关闭窗口

    既然window对象有打开窗口的函数,那肯定少不了关闭窗口的函数,我们可以通过 window对象.close() 的方式,关闭一个窗口,大多数的浏览器只允许关闭由自己的js代码打开的窗口

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">关闭新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        btn1.onclick = function () {
        	//将新打开的窗口的window对象返回给变量new_window
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//调用新打开窗口的window对象的close()方法
            new_window.close()
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    (4)对话框

    Window对象还提供了3个方法来向用户显示简单的对话框,他们分别是:alert()confirm()prompt()

    • alert()

    该方法传入一个字符串作为参数。执行时,在浏览器弹出一个消息提醒框,字符串会作为内容显示在框内。

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户手动关闭了该弹框以后,后面的js代码才会继续执行。

    这个是Window对象的方法,可以这样调用window.alert(),同时我们也可以省略window,直接这样写alert()

    alert('第一次弹出弹框')
    window.alert('第二次弹出弹框')
    

    动画展示

    在这里插入图片描述

    • confirm()

    该方法传入一个字符串作为参数。执行时,弹出一个消息框,字符串作为内容展示在框内,并且有 “确认” 和 “取消” 两个按钮,当点击 “确认” 时,返回true;当点击 “取消” 时,返回false。

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户点击了某个按钮以后,后面的js代码才会继续执行。

    调用该方法,window 可以省略,即可以这样调用 confirm()

    let ret1 = confirm('你确定吗?')
    console.log(ret1, 1)
    
    let ret2 = window.confirm('真的确定吗?')
    console.log(ret2, 2)
    

    动画展示
    在这里插入图片描述

    • prompt()

    该方法传入一个字符串作为参数。执行时,弹出一个框,字符串作为内容展示在框内,并且框内还有一个文本框,用户可以在文本框内输入内容。同时也有 “确定” 和 “取消” 两个按钮,若点 “确定”,则返回用户文本框内输入的字符串;若点 “取消”,则返回null

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户点击了某个按钮以后,后面的js代码才会继续执行。

    调用该方法,window 也可以省略,即可以这样调用 prompt()

    let ret1 = prompt('你是谁?')
    console.log(ret1, 1)
    
    let ret2 = window.prompt('你吃饭了吗?')
    console.log(ret2, 2)
    

    动画展示
    在这里插入图片描述

    其实除了这三种简单的对话框外,还有一种复杂的对话框,叫做模态对话框,调用方法为showModalDialog(),它的实质就是将另一个HTML文件作为弹框显示在页面中,因为比较复杂,用到的也不多,我就不多做讲解了,感兴趣的可以去网上自己看下文档。

    二、Window对象的属性

    要是说到Window对象的属性的话,那可就多了,我们先来讲一个常用的,例如opener ,该属性返回一个window对象,表示该窗口是由谁打开的。若不是被别的窗口打开,则返回null;若是被别的窗口打开,则返回那个窗口的window对象。 刚刚我们上面将了window对象的open()方法,并且知道了open()方法会返回新打开窗口的window对象。接下来我们来看一下例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">控制新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let new_window = null
        //弹出弹框,展示当前窗口的opener属性
        alert(window.opener)
        btn1.onclick = function () {
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//控制新窗口弹出弹框,判断新打开窗口的opener是否为当前窗口的window对象
            new_window.alert(new_window.opener === window)
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    还有更多的window对象属性,其实都是通过调用了别的对象的属性来引用的,因为window对象表示的整个窗口,所以window对象是最大的一个对象,在他里面还有很多别的对象,我们可以通过window.别的浏览器内置对象来引用别的对象属性。举个例子先location.href就是调用了Location对象,同时我们也可以这样调用Location对象 window.location,这两者相等。

    所以在这里,我列举出一些浏览器中常用的其他内置对象,之后我会针对每个对象写一篇博客对其进行讲解,并在本文放上那篇博客的链接,供大家观看。

    • Location对象

    博客链接:浏览器中内置对象Location属性与方法详解

    • History对象

    博客链接:浏览器中内置对象History属性与方法详解

    • Navigator对象

    博客链接:浏览器中内置对象Navigator和对象Screen的简单了解

    • Screen对象

    博客链接:浏览器中内置对象Navigator和对象Screen的简单了解

    结束语

    各位如果有什么要补充的,欢迎在评论区留言。大家点个收藏,关注浏览器别的内置对象的讲解。

    展开全文
  • 在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下History对象的属性与方法吧。...
  • 浏览器对象模型

    2018-10-23 09:10:50
    浏览器对象模型 (BOM) 是一种特定于浏览器的约定,是Web浏览器公开的所有对象。当浏览器解析一个文档时,它会创建一个对象集合,用于描述文档和如何显示它们的细节。浏览器创建的这个对象称为文档对象。它是浏览器...
  • 浏览器中内置对象Navigator和对象Screen的简单了解引言正文一、Navigator对象二、Screen对象结束语 引言 想必大家很奇怪,为什么本文是简单了解。其实BOM虽然提供了很多对象供我们去使用,但是有些对象其实是不那么...
  • 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade:一个Visual Studio扩展,可以将C#代码转换为JavaScript,Ceylon:...
  • 什么是BOM(浏览器对象模型)BOM:(Browser Object Mode) 浏览器对象模型。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性,也因此称之为:浏览器对象...
  • 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 1. open方法 语法格式...
  • 浏览器对象模型——BOM常用属性及方法

    多人点赞 热门讨论 2021-06-13 17:51:58
    BOM(Browser Object Modtael)是一种浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
  • 浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一、总结 1、BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集。 2、BOM提供了...
  • BOM(浏览器对象模型)对象总结

    千次阅读 2017-06-29 20:20:35
    1.window对象BOM的核心对象是window,它表示浏览器的一个实例,它也是ECMAScript规定的Globle对象,也就是说网页中任何一个对象都是在window这个对象里面的。如果有用到框架(frameset),那么每个框架都有自己的...
  • 什么是BOM(浏览器对象模型) BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 ...
  • JS BOM浏览器对象模型 BOM输出 open_close 网页 跳转 + 获取用户信息 窗口client 屏幕的可视区域 scroll 滚动 JS BOM浏览器对象模型 BOM输出 语法 作用 alert(内容) 弹窗提示 confirm(内容...
  • 在JavaScript浏览器对象模型中,Windows对象的( )属性 用来指定浏览器状态栏中现实的临时消息。 A ) status B ) screen C ) history D ) document 解析: A. 状态栏信息属性 B. 屏幕对象(也叫显示屏对象) C....
  • BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window; BOM是由一些列相关对象构成,并且每个对象都提供了很多方法与属性; BOM缺乏标准,Javascript...
  • 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”: DOM是javaScript和HTML页面进行对话的接口,javaScript可以通过DOM接口对HTML页面中的各个元素进行修改 BOM就是javaScript和浏览器对象进行...
  • 在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容。DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理。BOM不要包括...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 234,792
精华内容 93,916
关键字:

浏览器对象模型