美文网首页
浏览器对象模型

浏览器对象模型

作者: 南航 | 来源:发表于2015-11-02 02:36 被阅读530次

    本节重点

    • BOM 模型的主要应用 windows对象模型 + location对象 + history对象

    1. windows对象模型

    每个新打开的窗口都有自己的window对象

    windows对象模型

    window 对象下的六大属性也都是对象

    1. window的主要属性

      window的主要属性
    2. window的主要方法

      window的主要方法
    3. 系统对话框 alert() / confirm() / prompt()

      • alert() 弹出警告对话框

      • confirm() 可以点击确定或者取消(得到相应的 ture 或 false)

      • prompt() 提示框,可以得到返回值

          var num = prompt('请输入一个数字', 0); 
          alert(num);
        
      • print(); 得到打印对话框

      • find(); 得到查找对话框

      • 浏览器的底部状态值(系统属性)

          defaultStatus = '状态栏默认文本';  //浏览器底部状态栏初始默认值
        
          status = '状态栏文本 ';           //浏览器底部状态栏设置值
        
    4. window.open() 新建浏览器窗口

      • window.open() 接收四个参数

          第一个: 需要加载的 URL 地址
        
          第二个: 窗口的名称/窗口的目标
        
          第三个: 表示浏览器特性的字符串
        
          第四个: boolean 值 (表示取代当前正在进行的页面)
        
      • 第三个字符串参数的传值

    设置 说明
    width 数值 新窗口的宽度 ,不能小于100
    height 数值 新窗口的高度, 不能小于100
    top 数值 新窗口的坐标, 不能为负值
    left 数值 新窗口的坐标, 不能为负值
    location yes/no 在浏览器中是否显示地址栏
    menubar yes/no 在浏览器中是否显示菜单栏
    resizable yes/no 是否可以拖动改变浏览器的大小
    scrollbars yes/no 是否为溢出的内容显示浏览器的滚动条
    status yes/no 是否显示浏览器下面的状态栏
    toolbar yes/no 是否显示浏览器的工具栏
    - 第三个参数的设置:
    
            open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');
    
    1. 窗口的位置和大小

      • 窗口的位置信息

          screenLeft 和 screenTop   //IE 支持属性
          
          screenX 和 screenY       //firefox 支持属性
        
      • 窗口的 大小 信息

          innerWidth 和 innerHeight    //返回浏览器窗口的尺寸
          
          outerWidth 和 outerHeight  //浏览器窗口 + 边框的尺寸
        

        IE中的尺寸获取

          document.documentElement.clientWidth
          
          document.documentElement.clientHeight 
        
    2. 间歇调用和超时调用

      • 超时调用

          var timeOut = setTimeout(function(){},time); 
        

        说明:超时调用返回一个数值信息 timeOut,表示该超时调用的 ID

          clearTimeout(timeOut);   //可以通过该 ID 信息清除超时调用
        
      • 间歇调用

           var interval = setInterval(function(){},time);
        

        间歇调用表示每隔 time 时长的时间调用一次,反复执行

        因为间歇调用是反复执行的 所以在必要的时候清除间歇调用是非常必要的

          说明:间歇调用返回数值信息interval,表示间歇调用的 ID
          
          clearTimeout(interval);     //清除间歇调用
        
      • 使用超时调用模拟间歇调用

        一般认为,使用超时调用来模拟间歇调用是一种最佳模式 。在开发环境下,很少使用真 正的间歇调用,因为需要根据情况来取消 ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。

          var num = 0; 
          var max = 5;
          function timeOut() {
              num++;
              if (num == max) {
                  alert('5 秒后结束!'); 
              } else {
                  setTimeout(box, 1000);
              }
          }
          
          setTimeout(timeOut,1000);
        
    2. Location 对象

    window.location 和 document.location 等效。大家想想为什么呢??
    
    1. location对象的属性 (获取当前浏览器的URL)
    属性 描述的URL的内容
    hash 若存在,表示锚点部分
    host 主机名 : 端口号
    hostname 主机名
    href 整个URL
    pathname 路径名
    port 端口号
    search 查询字符串(包括传递的参数等等)
    1. Location对象的方法
    方法 功能
    assign("url") 跳转到指定的 URL,与 href 等效
    reload() 重载当前的url , 无参数
    replace("url") 用新的 URL 替换当前的 URL.
    3. history 对象

    保存着用户上网的记录,从窗口被打开的那一刻算起。
    
    1. history 对象的属性
    属性 描述 URL 中的部分
    length 描述当前的历史记录中的个数
    1. history 对象的方法
    属性 实现的功能
    back() 向前一个历史记录,类似后退
    forword() 向后一个历史记录 , 类似前进
    go(num) 根据参数设置向前或者向后

    相关文章

      网友评论

          本文标题:浏览器对象模型

          本文链接:https://www.haomeiwen.com/subject/xwlqhttx.html