美文网首页前端小问题
浏览器对象模型BOM常用对象

浏览器对象模型BOM常用对象

作者: wsgdiv | 来源:发表于2021-01-16 19:10 被阅读0次

含摘录,非原创
对象:window, document, location, screen, history, navigator
1、 window 对象 ,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
2、 document 对象,文档对象;
3、 location 对象,浏览器当前 URL 信息;
4、 navigator 对象,浏览器本身信息;
5、 screen 对象,客户端屏幕信息;
6、 history 对象,浏览器访问历史信息;
一、window对象
BOM的核心对象是 window,它代表浏览器的一个实例。在浏览器中,window有着双重的角色:JavaScript访问浏览器的接口对象,ES中的Global对象意味着网页中的任何一个对象,变量,函数都是以window作为其Global对象。

二、location对象
提供了与当前窗口中加载的文档有关的信息]: JavaScript高级程序设计。
注: window.location 和 document.location引用的是同一个对象。location 既是 window 对象的属性,也是 document对象的属性。

三、 navigator对象
navigator 对象主要用来获取浏览器的属性,区分浏览器类型;
navigator 对象属性较多,且兼容性比较复杂。

四、history对象
history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为 history 是 window 对象的属性,因此每个浏览器窗口,每个标签乃至每个框架,都有自己的 history对象与特定的 window 对象关联。

window对象
是整个BOM的核心,表示整个浏览器窗口。如果页面使用框架集合,每个框架都有自己的window对象表示,存放在frames集合中。
top指的是最顶层的框架,即浏览器窗口自身。
parent
self

  1. 窗口操作
    window.moveBy(dx,dy)
    window.moveTo(x,y)
    window.resizeBy(dx,dy)
    window.resizeTo(x,y)
  • 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判断浏览器窗口自身的大小。
  • Opera和Safari提供与Mozilla相同的工具。
  1. 导航和打开新窗口
    window.open("http://www.wrox.com/", "topFrame", "height=150,width=300,top=10,left=10,resizable=yes"):
    最多4个参数:
    要载入新窗口的页面的URL;
    新窗口的名字: 或者_self, _parent, _top, _blank
    特性字符串: 用逗号分割,都好前后不能有空格。包括left, top, height, width, resizable, scrollable, toolbar, status, location
    说明是否用新载入的页面替换当前载入的页面。
    返回:window对象
    举例:var openWin = window.open("http://www.wrox.com", "wroxwindow", "");
    可以调用close()方法关闭新创建的窗口openWin.close()─只对新创建的窗口有效。
    新窗口还可以对打开它的窗口有引用,放在opener数刑种,只有最高层window对象才有opener属性,可以用top.opener访问。

  2. 系统对话框
    alert("")
    confirm("Are you sure?"):返回Boolean值
    prompt("What's your name?", "Michael"):返回文本框中的值这些对话框都是系统窗口,都是模式的。

  3. 状态栏
    status:使状态栏的文本暂时改变;
    defaultStatus:

  4. 时间间隔和暂停
    var iTimeoutId = setTimeout("alert('show me!')", 1000);
    返回一个数字暂停的id,可以取消它:
    clearTimeout(iTimeoutId);

  5. 历史
    window.history.go(-1);
    history.back(), history.forward();
    history.length: 历史的页面数量

5.3.2 document对象
通用的属性
alinkColor, bgColor, fgColor, lastModified, referer, title, URL, vlinkColor
集合:anchors, applets, embeds, forms, images, links

5.5.3 location对象
hash: 如果url包含#,返回#及之后的内容
host:服务器的名字
hostname:等于host
href:当前载入的页面的完整url
pathname:url中主机名后的部分
port:端口
protocol:
search:?后面的部分

重定向:location.href="", 或者location.assign("")
重新载入:location.reload()
不让包含脚本的页面能从浏览器历史中访问,用:location.replace("")

location是window和document共同的属性

5.5.4 navigator对象
一般用于获取浏览器类型

5.5.5 screen对象
availHeight, availWidth, colorDepth, height, width
可以这样填充屏幕:
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);

相关文章

  • 前端浏览器对象模型BOM常用对象用法介绍

    前端浏览器对象模型BOM常用对象介绍,BOM即Broswer Object Model 浏览器对象模型,在Java...

  • BOM

    BOM 浏览器对象模型 BOM(Browser Object Model)是指浏览器对象模型,浏览器对象模型提供来...

  • JavaScript之操纵BOM对象(重点)

    六、操作BOM对象(重点) 目录:操作BOM对象BOM:浏览器对象模型 1.操作BOM对象 1)浏览器介绍Java...

  • JavaScript Window - 浏览器对象模型(9/11

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。 浏览器对象模型 (BOM) 浏览器...

  • 1 js之window

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话” 1 浏览器对象模型 (BOM)浏览器...

  • DOM和BOM

    BOM 介绍 BOM:browser object model浏览器对象模型,用对象操作浏览器 window对象是...

  • BOM

    BOM的概念 BOM指浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象...

  • BOM模型

    BOM模型 浏览器对象模型(Browser Object Model),BOM对象是JavaScript的核心,该...

  • js的window常用方法&常用属性

    知识总结: 浏览器对象模型BOM:将浏览器常用方法封装进window对象,对外供js调用具体实现:window对象...

  • 复习笔记之API(9) BOM浏览器对象模型

    BOM浏览器对象模型 BOM(Browser Object Module)概述:浏览器对象模型,它提供了独立于内容...

网友评论

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

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