锐客网

  1. 首页 > it技术 > >

Javascript——操作BOM的API

  • 了解BOM
    • BOM (Browser Object Model) 是浏览器对象模型
    • 浏览器提供了一套可使用 JS 操作浏览器窗口的属性与方法
    • BOM 的顶级对象是 window，每个页面就有一个 window ，所有全局变量页都定义在 window 下
    • 操作 BOM 相关API 都是以 window.xxx格式，一般可省略 window
  • 浏览器可视窗口大小操作API(包含滚动条尺寸)
    可视窗口的宽度：window.innerWidth 可视窗口的高度：window.innerHeight返回值是当前浏览器窗口可视区域的大小

    Javascript——操作BOM的API
    文章图片

  • 浏览器弹出层API(可在浏览器弹出一个弹窗显示一些信息)
  • 警告提示框弹出层
    • 特点：弹出一个警告提示框，提示框内显示一些文本，并且有一个确定按钮
    语法：window.alert('提示文本会变量') 返回值：点击确定后，返回 undefined

    Javascript——操作BOM的API
    文章图片

  • 选择提示框弹出层
    • 特点：弹出一个选择提示框，提示框内显示一些文本，并且有一个确定按钮和一个取消按钮
    语法：window.confirm('提示文本会变量') 返回值：点击确定后，返回 true，点击取消后，返回 false

    Javascript——操作BOM的API
    文章图片

  • 输入提示框弹出层
    • 特点：弹出一个输入提示框，提示框内显示一些文本，并且有一个确定按钮和一个取消按钮，还有一个输入框
    语法：window.prompt('提示文本会变量') 返回值：输入框内有内容，点击确定返回输入框内的内容，输入框内无内容，点击确定按钮返回值空字符串，输入框无论是否有内容，点击取消返回值都是null

    Javascript——操作BOM的API
    文章图片

  • 三种弹出层存在的共性：弹出层都会阻断程序的执行，只有等待用户操作后才会继续进行执行后续代码层序
  • 地址栏API
  • 浏览器地址栏地址构成部分
    Javascript——操作BOM的API
    文章图片

    • 传输协议：如http、https、ftp等
    • 域名(服务器地址)：如www.baidu.com
    • 查询字符串(打开网页携带的信息)：如?fr=aladdin#4
    • 哈希(锚点定位)：如#4
  • 网页地址栏信息对象——location对象
    • 获取和设置地址栏地址
    获取地址栏地址语法：window.location.href 返回值：当前网页地址栏地址设置跳转地址：window.location.href='https://www.it610.com/article/跳转页面地址' window.location.href="https://www.baidu.com"

    • 获取和设置地址栏中的查询字符串
    获取地址栏地址语法：window.location.search 返回值：当前网页地址栏地址的查询字符串设置地址栏的查询字符串：window.location.search='查询字符串' window.location.search="fr=aladin"

    • 获取和设置地址栏中的哈希值
    获取地址栏地址语法：window.location.hash 返回值：当前网页地址栏地址的哈希值设置地址栏的查询字符串：window.location.search='哈希值' window.location.search="4"

    • 页面刷新
    设置属性：window.location.reload() 需要写在限制条件内，如果不写在限制条件内会导致浏览器崩溃

  • 浏览器历史记录API——history对象
    • 回退到上一个网页操作：window.history.back()
    • 前进到下一个网页操作：window.history.forward()
    • 包含回退、刷新、前进操作：window.history.go(整数)
      • 正整数表示前进，2以上表示多级前进；0 表示刷新；负整数表示回退，-2以上表示多级回退
  • 浏览器信息API——navigator对象
    • 获取当前浏览器版本信息：window.navigator.userAgent
    • 获取浏览器名称：window.navigator.appName
    • 获取浏览器当前运行系统：window.navigator.platform
  • 浏览器滚动时卷去的宽高API
  • 获取卷去的高度
    HTML文件存在DOCTYPE标签时获取方式： var 变量 = document.documentElement.scrollTopHTML文件不存在DOCTYPE标签时获取方式： var 变量 = document.body.scrollTop兼容语法： var 变量 =document.documentElement.scrollTop || document.body.scrollTop

  • 获取卷去的宽度
    HTML文件存在DOCTYPE标签时获取方式： var 变量 = document.documentElement.scrollLeftHTML文件不存在DOCTYPE标签时获取方式： var 变量 = document.body.scrollLeft兼容语法： var 变量 =document.documentElement.scrollLeft || document.body.scrollLeft

    Javascript——操作BOM的API
    文章图片

  • 设置浏览器滚动到指定位置API
    语法①：window.scrollTo(X轴坐标, Y轴坐标) 特点：瞬间定位到目标位置语法②： window.scrollTo{ // 定位到的目标坐标位置 top: 0, left: 0, // 设置定位时的滚动方式 // 平滑滚动：smooth // 瞬间定位：instant behavior: smooth }

  • 操作BOM 的事件
  • 页面加载事件
    特点：页面所有资源加载完后触发，可将JS代码前置，并正常使用
    window.onload = function(){ 执行代码 }

  • 滚动条滚动事件
    特点：滚动条滚动时触发，可实现楼层显示、顶部导航栏适时固定显示、回到顶部、渐进页面加载显示、瀑布流等操作
    window.onscroll = function(){ 执行代码 }

  • 【Javascript——操作BOM的API】实时监测可视窗口大小事件
    特点：可视窗口变化时触发，结合innerWidth与innerHight判断屏幕尺寸，实现监测移动端的横竖屏、响应式布局
    window.onresize=function(){ 执行代码 }

    推荐阅读


    上一篇：使用renode仿真开发OneOS-Lite物联网操作系统

    下一篇：java开发技术之Redis类型技能入门篇