BOM(浏览器对象模型)

BOM(浏览器对象模型)

一. window

1.定义

  • window是js在浏览器环境中 全局变量
  • 函数就是window的方法
  • 全局变量就是window的属性

2.属性

  • document

  • location

  • history

  • screen

  • navigator

  • innerWidth 文档区域宽度

  • innerHeight 文档区域高度

  • outerWidth 浏览器窗口宽度

  • outerHeight 浏览器窗口高度

    document.write("window.innerWidth : "+window.innerWidth+"
    ");
    document.write("window.innerHeight : "+window.innerHeight+"
    ");

    document.write("window.outerWidth : "+window.outerWidth+"
    ");
    document.write("window.outerHeight : "+window.outerHeight+"
    ");

  • name 窗口的名字

  • parent 父窗口

    <buttononclick="window.parent.document.body.style.color='red '">改变父窗口

  • top 顶层窗口

  • length 子窗口的数量

  • frames 子窗口的集合


3.方法

  • alert（）警告框

  • confirm（） 确认框

  • prompt（） 可输入弹框

  • setInterval()

  • clearInterval()

  • setTimeout()

  • clearTimeout()

  • open() 打开新窗口

    //跳转打开新窗口
    //在本窗口打开窗口
    //在本窗口打开一个小窗口

  • close () 关闭窗口

  • print（） 打印

  • scrollBy（） 按照指定像素滚动内容

  • scrollTo（） 把内容滚动到指定位置


    TOP

  • moveBy() 可相对窗口的当前坐标把它移动指定的像素。 仅IE

  • moveTo() 把窗口的左上角移动到一个指定的坐标。 仅IE

  • resizeBy() 按照指定的像素调整窗口的大小。 仅IE

  • resizeTo() 把窗口的大小调整到指定的宽度和高度。 仅IE

二. location (地址位置)

1.属性

  • href 完整的url

  • protocol 协议

  • hostname 主机名

  • port 端口号

  • host 主机名和端口号

  • pathname 文件路径

  • search 查询部分

  • hash 锚点部分

    document.write("href: "+location.href+"
    ");
    document.write("协议："+location.protocol+"
    ");
    document.write("主机名："+location.hostname+"
    ");
    document.write("端口名："+location.port+"
    ");
    document.write("主机名+端口号："+location.host+"
    ");
    document.write("锚的部分："+location.hash+"
    ");
    document.write("查询部分："+location.search+"
    ");
    document.write("路径部分："+location.pathname+"
    ");

2.方法

  • reload（） 重新加载当前文档

  • assign（） 加载新的文档

  • replace（） 用新的文档替换当前文档



三.history (历史记录)

1.属性

  • length 历史记录的数量

2.方法

  • back（） 回退一步

  • forward（） 前进一步

  • go（n） 前进/后退n步





四.screen（屏幕）

1.属性

  • width 屏幕宽度

  • height 屏幕高度

五.navigator(导航)

1.属性

  • userAgent 平台，浏览器相关的信息

  • platform 平台

  • appName 返回浏览器的名称

  • appVersion 返回浏览器的平台和版本信息

  • userAgent 返回由客户机发送服务器的 user-agent 头部的值

  • onLine 返回指明系统是否处于脱机模式的布尔值

  • appCodeName 返回浏览器的代码名

  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值

    console.log("appCodeName: "+navigator.appCodeName);
    // appCodeName 返回浏览器的代码名
    console.log("userAgent "+ navigator.userAgent);//userAgent 返回由客户机发送服务器的 user-agent 头部的值。
    console.log("appCodeName: "+navigator.appName);
    // appName返回浏览器的名称
    console.log("appVersion: "+navigator.appVersion);
    //appVersion 返回浏览器的平台和版本信息
    console.log("platform: "+navigator.platform);
    //platform 返回运行浏览器的操作系统平台

补充

浏览器内核

  • 内核应该包含渲染引擎/JS引擎
  • 渲染引擎负责渲染HTML和CSS,JS引擎负责运行JS
  • 现在提到浏览器内核也可以单指渲染引擎

常见的浏览器内核

  • webkit (chrom safari)
  • blink (webkit的改型，chrome,opera)
  • trident IE
  • Gecko Firfox
  • Kestrel 老欧朋

URL URI 区别

  • URI 标准 中包含 URN 和 URL
  • URI： 统一资源标示符
  • URN：统一资源命名符
  • URL： 统一资源定位符
posted @ 2017-08-30 18:31  不完美的完美  阅读(362)  评论(0)    收藏  举报