• BOM对象


    BOM简介

    window对象

    screen屏幕对象

    navigator浏览器对象

    location地址栏对象

    history历史记录对象

    BOM简介

    BOM,Browser Object Model,浏览器对象模型。

    BOM主要提供了访问和操作浏览器各组件的方式。

    浏览器各组件:

    window(浏览器窗口)

    location(地址栏)

    history(浏览历史)

    screen(显示器屏幕)

    navigator(浏览器软件)

    document(网页文档)

    BOM结构简图:

    window对象

    1.常见属性

    name:指浏览器窗口的名字或框架的名字。这个名字是给a标记的target属性来用的。

    top:代表最顶层窗口。

    parent:代表父窗口,主要用于框架。

    self:代表当前窗口。

    innerWidth:浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏、滚动条)。

    在IE下,使用 document.documentElement.clientWidth 来代替 window.innerWidth

    innerHeight:浏览器窗口内高(不含菜单栏、工具栏、地址栏、状态栏、滚动条)。

    在IE下,使用 document.documentElement.clientHeight 来代替 window.innerHeight

    document.documentElement 是<html>标记对象

    document.body  是<body>标记对象

    2.常见方法

    alert():弹出一个警告对话框。

    prompt():弹出一个输入对话框。

    confirm():弹出一个确认对话框。单击确定返回true,否则返回false。

    close():关闭窗口。

    print():打印窗口。

    setInterval():设置计时器。返回计时器ID。

    clearInterval():清除指定ID的计时器。这个ID是setInterval()返回的。

    setTimeout():设定延时器。

    open():

    功能:打开一个新的浏览器窗口或查找一个已命名的窗口。

    语法:var winObj = window.open(URL, name, features, replace);

    参数:

    URL- 可选的字符串,声明了要在新窗口中显示的文档的 URL。

    name - 可选的字符串,声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的 target 属性的值。

    features - 可选的字符串,声明了新窗口要显示的标准浏览器的特征。详见下图。

    replace - 可选的布尔值,true 表示URL替换浏览历史中的当前条目;false 表示URL在浏览历史中创建新的条目。

    返回值:返回一个window对象

    3.常见事件

    onload事件:当网页加载完成,指<body>标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。

    onclick事件:当单击时,去调用JS代码。所有HTML标记都具有该事件属性。

    screen屏幕对象

    1.常见属性

    Width:屏幕的宽度,只读属性。

    Height:屏幕的高度,只读属性。

    availWidth:屏幕的有效宽度,不含任务栏。只读属性。

    availHeight:屏幕的有效高度,不含任务栏。只读属性。

    navigator浏览器对象

    1.常见属性

    appName:浏览器软件名称,主要用来判断客户使用的是什么核心的浏览器。

    如果是IE浏览器,返回值为 Microsoft Internet Explorer

    如果是Firefox浏览器,返回值为 Netscape

    appVersion:浏览器版本信息。

    systemLanguage:系统语言。

    userLanguage:用户语言。

    platform:操作系统平台。

    location地址栏对象

    1.常见属性

    href:获取地址栏中完整的地址。可以试下JS的网页跳转。location.href = "http://www.cnblogs.com/"

    host:主机名和当前 URL 的端口号。

    hostname:主机名。

    pathname:当前 URL 的路径部分。

    search:查询字符串(从问号 (?) 开始的 URL(查询部分))

    protocol:协议。如 http://、ftp:// 

    hash:锚点名称。如 #top

    2.常见方法

    reload([true]):刷新网页。true参数表示强制刷新

    注意:所有的属性,重新赋值后,网页将自动刷新。

    此外,<meta>标签也可以实现刷新网页:

    // 网页加载完 5 秒后,跳到博客园首页

    <meta  http-equiv = “refresh”  content = “5;url=http://http://www.cnblogs.com/”  />

    History历史记录对象

    1.常见属性

    length:历史记录数。

    2.常见方法

    go(n):同时实现前进和后退。

    history.go(0)   刷新网页

    history.go(-1)  后退一步

    history.go(1)   前进一步

    history.go(3)   前进三步

    forward():相当于浏览器的“前进”按钮。

    back():相当于浏览器的“后退”按钮。

     

  • 相关阅读:
    T4模板使用记录,生成Model、Service、Repository
    sortablejs + vue的拖拽效果 列表个数不固定 刷新后保持拖拽后的效果
    vue获取input焦点,弹框后自动获取input焦点
    vue proxy 跨域代理
    vue 同步 $nextTick setTimeout 执行的顺序
    js手写日历插件
    js数组随机排序
    vue自定义插件
    elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示
    awit的用法,等待执行结果
  • 原文地址:https://www.cnblogs.com/mingc/p/6030657.html
Copyright © 2020-2023  润新知