• JavaScript BOM ( 8 章 ) (目前 略)


    BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。( 浏览器提供商各不一样 )

    w3c 为了标准化, 已经把 BOM 的主要方面纳入 HTML5 规范中.

    window对象

    BOM的核心对象是 window,它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器的窗口的一个接口,又是ECMAScript规定的Global对象。

    所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。

       1:  var age = 29;
       2:  function sayAge(){
       3:      alert(this.age);
       4:  }
       5:   
       6:  alert(window.age);        //29
       7:  sayAge();                //29
       8:  window.sayAge();        //29
    frame HTML5不支持

    如果页面包含框架 frame,那么每个框架都拥有自己的 window对象( html5不支持 frame框架 ),window.frames[0] 之类的用法。而真正的window对象,是frames[0]对象的父对象。

    窗口位置

    确定和修改window对象位置的属性和方法很多。 如  screenLeft, screenTop,属性分别用于表示窗口相对于屏幕左边和上边的位置。(注意,各个浏览器的属性和方法不同

    但是因为每个浏览器支持不同,所以要有如下代码:

    image

    这样,leftPos, 就是浏览器距离左边屏幕的距离,topPos 就是浏览器距离上边屏幕的距离。

    window.moveBy(0, 100);    //将窗口向下移动100像素

    window.moveTo(200,300);    //将窗口移动到(200,300)

    window.moveBy(-50,0);        //将窗口向左移动50像素

    窗口大小

    仍然存在浏览器差异的问题,window.innerWidth,window.innerHeight。属性

    window.resizeTo(100,100)   //调整窗口到 100,100

    window.resizeBy(100,50)     //调整窗口增加100,50,按照上边的基础,就是200,150

    打开窗口

    window.open(4个参数)       //打开窗口

    var w3cWin = window.open(“http://www.3cschool.com”,”w3c”,”height=400, width=400, top=10, left=10, resizable=yes”);

    w3cWin = resizeTo(500, 00);

    w3cWin = moveTo(100,100);

    w3cWin.close();

    但是目前很多浏览器都有安全限制,即不准许程序员调用此方法来弹出广告等内容。

    间歇调用和超时调用

    JavaScript是单线程语言,但它允许通过设置超时和间歇时间值来调用代码在特定时刻执行。

    1)超时调用,在指定的时间过后执行代码 ( 单位是毫秒 ) 1秒后执行hello,world.

       1:  setTimeout(function(){
       2:      alert("Hello world");
       3:  }, 1000);

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

       1:  //设置超时调用
       2:  var timeoutId = setTimeout(function(){
       3:      alert("Hello world");
       4:  }, 1000);
       5:   
       6:  //注意,把他取消
       7:  clearTimeout(timeoutId);

    只要是在指定的时间尚未过去之前调用 clearTimeout(),就可以完全取消超时调用。

    超时调用的代码都是在全局作用域中执行的,因此函数中 this 的值通常会指向 window 对象

    2)间歇调用,在指定的时间间隔重复执行代码。

       1:  setInterval(function(){
       2:      alert("hello world");
       3:  }, 10000);
     

    同样,该方法也会返回一个 ID,该 ID 用于在某个时刻取消调用。要取消使用 clearInterval()。

       1:  var num = 0;
       2:  var max = 10;
       3:  var intervalId = null;
       4:  function incrementNumber(){
       5:      num++;
       6:      if(num == max){
       7:          clearInterval(intervalId);
       8:          alert("Done");
       9:      }
      10:  }
      11:   
      12:  intervalId = setInterval(incrementNumber, 500);
    超时调用模仿间歇调用 ( 上例 )
       1:  var num = 0;
       2:  var max = 10;
       3:  var intervalId = null;
       4:  function incrementNumber(){
       5:      num++;
       6:      if(num < max){
       7:          setTimeout(incrementNumber, 500);
       8:      }else{
       9:          alert("Done");
      10:      }
      11:  }
      12:   
      13:  setTimeout(incrementNumber, 500);
     

    在使用超时调用时,没有必要跟踪超时调用 ID,因为每次执行代码后,如果不再设置另一个超时调用,调用就会自动停止,在开发环境中,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动( 这样,就很难控制间歇调用 ),而像这个例子一样使用超时调用代替间歇调用,则完全可以避免这一点。所以,最好不要使用间歇调用

    系统对话框

    系统对话框的外观有操作系统及浏览器设置决定,而不是由CSS决定。

    1)alert()

    2)confirm() (点ok, true,点cancle或者关闭对话框, false)

       1:  if(confirm("Are you sure?")){
       2:      alert("I'm so glad you are sure");
       3:  }else{
       4:      alert("I'm sorry to hear you're not sure");
       5:  }

    3)prompt() ( 2个参数,第1个事提示信息,第2个是用户输入的默认信息 )

    prompt(“What is your name?”,”Michael”);

    image

    另外,如果用户点OK,则返回文本域的值,否则返回 null

    location对象

    location对象是最有用的BOM对象之一,它提供了当前窗口中加载文档有关的信息,还提供了一些导航功能。它既是window对象的属性,也是document对象的属性。即 document.location和window.location引用的是同一个对象。

    location.assign(http://www.wrox.com);  // 为浏览器传递一个地址

    navigator对象

    可以用来确认浏览器信息。以及cookie的部分信息。检测浏览器插件。等等。

    navigator 提供了很多属性来确认浏览器的信息, 例如 appCodeName 浏览器名称, appVersion 浏览器版本, language 浏览器主语言 等等

    检测插件, navigator.plugins 等

    注: 所谓的浏览器差异化, 应该 只是说浏览器本身提供的API, 有差异, 或者提供相同API, 但是实现的方式有差异.

    screen对象

    顾名思义,是一些显示器相关的内容。

    history对象

    保存历史记录。是window对象的属性。

  • 相关阅读:
    2016工作总结与反思
    JSP 标准标签库(JSTL)
    JQuery遍历CheckBox踩坑记
    JAVA中按照""截取字符串
    file上传图片功能
    List转化为Map
    Map转化为List
    对JAVA的LIST进行排序
    根据制定ID查询信息
    制定查询条数
  • 原文地址:https://www.cnblogs.com/moveofgod/p/2697773.html
Copyright © 2020-2023  润新知