• 简单总结-BOM


    1.什么是bom?

    全称:浏览器对象模型(Browser Object Model)

    bom是js的一部分,

    实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。多年来,缺少事实上的规范导致BOM及有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它。于是,浏览器之间公有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性。W3C为了把浏览器中JavaScript最基本的部分标准化,已经将BOM的主要方面乃如了HTML5的规范中。

    2.bom的对象,方法和方法

    bom提供了主要的8大对象:Window,Screen,Loacation,History,Navigator;Screen,Loacation,History,Navigator四大类是Window的成员,因此都可以通过Window.*去访问。

    1.Window

    1.What?

    Window对象:表示浏览器打开的窗口、标签或者框架(若当前页面里包含多个iframe,会为每个iframe创建Window对象)。

    Window对象不会被实例化,调用属性和方法都作为window的静态成员。

    全局变量是 window 对象的属性。

    全局函数是 window 对象的方法。

    2.How?

    调用方式:调用Window对象的成员时,可以省略前面的window。如:window.alert() 可写成 alert() 。

    3.Attribute

     readonly ApplicationCache applicationCache :返回窗口的应用缓存对象。

     readonly boolean  closed :返回窗口是否已经关闭。

     readonly Console console :返回对Consol对象的引用,对浏览器控制台进行操作。

     readonly int  devicePixelRatio :返回设备像素比,即当前显示器的物理像素和设备独立像素(dip)的比例。

     readonly Document document :返回当前窗口的Document对象。

     readonly Element frameElement :若当前window处于一个<iframe>中,此属性返回这个IFrame。若在顶级窗口,返回null。

     readonly Window [] frames :返回一个包含窗口内所有的框架的数组。

     readonly History history :返回一个History对象。可对当前页的历史进行操作,如:前进、后退等。

     readonly long innerHeight :返回当前窗口可显示HTML文档的高度,单位px(像素)。

     readonly long innerWidth :返回当前窗口可显示HTML文档的宽度,单位px(像素)。

     readonly long  length :返回窗口内包含框架的数量,即frames数量。

     readonlyLocation location :返回一个Location对象。可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

     readonly LocalStorage localStorage :返回一个键/值对存储的Storage对象,持续到被用户删除。

     string name :设置或获取当前窗口的name。

     readonlyNavigator navigator :返回一个Navigator 对象。包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

     Window openner :返回对打开当前窗口的原窗口一个引用。若当前窗口是由另一个窗口打开的, window.opener保留对那个窗口的引用. 如果当前窗口不是由其他窗口打开的,则该属性返回 null。

     readonly long outerHeight :返回当前浏览器的总高度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

     readonly long  outerWidth :返回当前浏览器的总宽度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

     readonly long  pageXOffset :返回文档横向滚动的距离,单位px(像素)。

     readonly long  pageYOffset :返回文档纵向滚动的距离,单位px(像素)。

     readonly Window parent :返回当前窗口的父级窗口。若当前窗口是顶级窗口,返回当前窗口本身。若当前窗口为一个框架窗口,返回它的父窗口。

     readonlyScreen screen :返回一个Screen对象。包含屏幕信息。如:获取屏幕高度、宽度等等。

     readonly long  screenX :返回浏览器在屏幕的X坐标。

     readonly long screenY :返回浏览器在屏幕的Y坐标。

     readonly long scrollX  :返回文档横向滚动的距离,单位px(像素)。与pageXOffset属性一样。

     readonly long scrollY  :返回文档纵向滚动的距离,单位px(像素)。与pageYOffset属性一样。

     readonly Window self :返回一个对当前Window对象的引用。

     readonly SessionStorage sessionStorage :返回一个键/值对存储的Storage对象,持续到当前浏览会话结束。

     readonly Window top :返回当前窗口的顶级窗口。若当前窗口本身已经是顶级,则返回自身。若当前窗口为一个框架窗口,返回包含它的顶级窗口(parent只是返回父窗口)。

     readonly Window window :返回当前窗口Window对象。

    2.Method

     void  addEventListener (string eventType,function eventListener) :给窗口注册事件。eventType事件类型,如:click。eventListener:事件触发的函数或对象。

     void alert (string msg) :弹出一个包含msg和一个确认按钮的警告框。

     string atob (string base64Str) :将一个基于Base64编码的字符串解码为一个字符串。

     void blur () :当前窗口移除焦点。

     string btoa (string str) :将一个字符串编码为一个Base64编码。

     void clearInterval (long intervalHandle) :停止intervalHandle指定的setInterval()。

     void clearTimeout (long timeoutHandle) :停止timeoutHandle指定的setTimeout()。

     void close () :关闭当前窗口。只能关闭由脚本打开的窗口,如:a元素打开新页面。

     boolean confirm (string msg) :显示带有一段消息以及确认按钮和取消按钮的对话框。点击确认按钮返回true,点击取消按钮返回false。

     void  focus () :当前窗口获得焦点。

     void  moveBy (long deltaX, long deltaY) :使open()方法创建的窗口,在本身的位置上,水平移动deltaX个像素,垂直移动deltaY个像素。

     void  moveTo (long x, long y) :使open()方法创建的窗口,移动到x,y坐标。

     Window open (string url, string target, string features, string replace) :创建一个新的窗口。

     void  print () :调用浏览器的打印按钮。

     string prompt (string msg) :弹出一个显示msg信息并包含一个确定按钮和取消按钮的输入框。此输入框会阻塞页面,点击确定按钮返回输入的内容,点击取消按钮返回null。

     void resizeBy (long deltaWidth, long deltaHeight) :使open()方法创建的窗口,在本身的位置上,宽度增加deltaWidth个像素,高度增加deltaHeight个像素。

     void resizeTo (long width, long height) :使open()方法创建的窗口,宽度变为width,高度变为height。

     void scrollBy (long deltaWidth, long deltaHeight) :在当前滚动的基础上,横向滚动deltaWidth像素,纵向滚动deltaHeight像素。

     void scrollTo (long width, long height) :横向滚动到width像素距离上,纵向滚动到height像素距离上。

     long  setInterval (function fn, long time) :每隔一定的周期(毫秒)执行指定函数。

     long setTimeout (function fn, long time) :在一定的毫秒数后执行指点函数。

    2.Screen

    1.What?

    window.screen 对象包含有关用户屏幕的信息,如一些属性:

    • screen.availWidth - 可用的屏幕宽度
    • screen.availHeight - 可用的屏幕高度

    2.how?

    window.screen 对象在编写时可以不使用 window 这个前缀。

    调用方式:window.screen 或者 screen。

    3.Attribute

     readonly long  availHeight :返回浏览器在屏幕的可用高度,单位px(像素)。可理解为浏览器最大化的高度,一般为屏幕高度减去上下系统任务栏或停靠栏。

     readonly long availWidth :返回浏览器在屏幕的可用宽度,单位px(像素)。可理解为浏览器最大化的宽度,一般为屏幕宽度减去左右系统任务栏或停靠栏。

     readonly long  colorDepth :返回屏幕的颜色深度。颜色深度简单说就是最多支持多少种颜色,。一般是用“位”来描述的。比如BMP格式,则最多可以支持红、绿、蓝各256种,总共24位。所以颜色深度是24。

     readonly long  height :返回屏幕的高度,单位px(像素)。

     readonly long  pixelDepth :返回屏幕的色彩深度。

     readonly long  width :返回屏幕的宽度,单位px(像素)。

    3.Navigator

    1.What?

    Navigator 对象包含有关浏览器的信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

    2.How?

    调用方式:window.navigator 或者 navigator。

    3.Attribute

     readonly string appName :返回浏览器的名称。基于 Netscape 的浏览器中,返回的是 "Netscape"。在 IE 中,返回值为 "Microsoft Internet Explorer"。

     readonly string  appVersion :返回浏览器版本和平台信息。如:某个Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

     readonly  Geolocation geolocation :返回一个Geolocation对象,可获取当前的地理信息。

     readonly string language :返回浏览器界面语言。简体中文返回:"zh-CN"。

     readonly boolean onLine :返回浏览器是否可连接网络。

     readonly string  platform :返回浏览器所在的系统平台。如:Win32。

     readonly string userAgent :返回由客户机发送服务器的 user-agent 头部的值。如:"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

     readonly  ServiceWorker serviceWorker :返回ServiceWorker对象。serviceWorker运行于浏览器后台的一种脚本,它可以无需Web页面或者用户交互就能提供额外的功能。

    4.Method

     boolean  javaEnabled () :返回浏览器是否启用Java。

    4.History

    1.What?

    window.history 对象包含浏览器的历史。

    window.history 对象在编写时可不使用 window 这个前缀。

    为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

    可对当前页的浏览历史进行操作,如:前进、后退等。但不能知道浏览了哪些URL。

    2.How?

    调用方式:window.history 或者 history。

    3.Attribute

     readonly long length :返回浏览器历史列表中的 URL 数量。

    4.Method

     void back () :当前所属窗口访问上一个访问过的URL。等同于浏览器的"后退"按钮,也等同于history.go(-1)。

     void  forward () :当前所属窗口访问下一个访问过的URL。等同于浏览器的"前进"按钮,也等同于history.go(1)。

     void  go (int index) :使当前窗口访问指定的访问过的URL。当前窗口访问过的URL,是存入一个数组。正数表示前进index个(点击"前进"按钮index次),负数表示后退index个(点击"后退"按钮index次)。

    5.Location

    1.What?

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

    window.location 对象在编写时可不使用 window 这个前缀。

    2.How?

    调用方式:window.location 或者 location。

    3.Attribute

     string hash :设置或返回当前页面URL中的的锚部分,包含开头的#符号。

     string host :设置或返回当前页面URL的主机名称和端口。

     string hostname :设置或返回当前页面URL的主机名称。

     string href :设置或返回当前页面完整的URL。若设置时不加协议,设置的字符串只是改变URL最后一个'/'之后的字符串。

     string pathname :设置或返回当前页面URL的路径部分。

     string port :设置或返回当前页面URL的端口。若当前URL没有端口,返回一个''(空字符串)。

     string  protocol :设置或返回当前页面URL的协议,最后面会有个':'冒号。

     string  search :设置或返回当前页面URL的查询部分(从问号 (?) 开始的 URL)。

     readonly string  origin :返回当前页面URL的源。返回格式:协议+主机名+端口;如:https://www.baidu.com

    4.Method

     void  assign (string url) :设置当前页面加载指定的url,等同于设置href属性的值为url。

     void reload () :重新加载当前页面的URL。可看成为刷新操作。

     void replace (string url) :设置当前页面加载指定的url,并在浏览器历史记录中替换掉当前地址,进行"后退"操作不会显示当前访问过的记录。

    注:readonly:只读。

    转载:http://www.cnblogs.com/polk6/p/5045277.html

    3.bom与dom的关系与区别

    关联:因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。

    区别:DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。

    注:参考:https://blog.csdn.net/xiao_tommy/article/details/53231165

  • 相关阅读:
    Anaconda 和 Jupyter notebook
    DOM基础之创建元素
    python爬虫入门学习3 Requests请求库
    04 字典类型已内置方法
    05 流程控制
    03 可变类型与不可变类型
    02 元组数据类型
    01 列表内置方法
    day2笔记
    00 python基础知识
  • 原文地址:https://www.cnblogs.com/ReLRayford/p/9839094.html
Copyright © 2020-2023  润新知