JS BOM详解

BOM

BOM (浏览器对象模型)、JS 提供了可以操作浏览器的对象 ,顶层对象为 window 。 常见的浏览器对象 主要有 screen , navigator , location , history , document 五大类。

window 对象的操作

  • innerWidth/ innerHeight : 获取 浏览器 可见内容的宽度 / 高度 、只读属性

  • outerWidth / outerHeight: 获取 浏览器 自身的 宽度 / 高度 、只读属性

  • alert(message) : 提示框

  • prompt(tips) : 输入提示框

  • confirm(tips) : 确认对话框

  • btoa(string) : 将 字符串(只支持 ascii字符) 进行 base64编码

  • atob(string) : 进行 base64解码

  • setTimeout(fn, delay) : 将指定的 fn 延迟 delay 毫秒 执行

  • setInterval(fn, delay) : 每间隔 delay 毫秒 执行一次 fn

  • clearTimeout(x) : 清除 setTimeout 产生的延迟

  • clearInterval(x) : 取消 setInterval 产生的 轮询。

  • open(url, target, feature) : 打开一个新窗口

    • feature 常见的值
      • width : 设置新窗口的宽度、单位像素
      • height: 设置 新窗口的高度、单位像素
      • left / top : 设置 新窗口 的左侧/顶部 偏移量, 单位像素
javascript 复制代码
let  childWin = window.open("./child.html", "", "height=600,width=800, top=100, left=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no");
  • close() 关闭窗口
  • scrollTo(x, y) : 设置 窗口 水平、垂直 滚动条 相对浏览器的偏移位置 , 也支持 使用 scrollTo({left: 0, top: 0, behavior: 'smooth'})
  • scrollBy(x, y) : 设置 窗口 水平、垂直 滚动条 相对滚动条自身偏移位置的 偏移量, 用法和 scrollTo 相同。

screen 屏幕对象的操作

  • width : 获取 屏幕的 宽度
  • height: 获取 屏幕的 高度
  • userAgent : 获取 浏览器的身份信息

    复制代码
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
  • geolocation : 获取地理位置信息

    javascript 复制代码
    navigator.geolocation.getCurrentPosition(pos => {
    	// 获取维度
    	//console.log(pos.coords.latitude)
    	// 获取经度
    	//console.log(pos.coords.longitude)
    	let location = `${pos.coords.longitude},${pos.coords.latitude}`
    	// 调用高德地图接口 ,获取 地理位置 
    	let url = "https://restapi.amap.com/v3/geocode/regeo?key=cd1d2751ad046252748d6038c797994f&location=" + location ;
    	fetch(url).then(response => response.json())
    		.then(ret => {
    			if (ret.status == 1) {
    			  // 获取详细地理位置信息
    				let address = ret.regeocode.formatted_address
    				console.log(address);
    			}
    		})
    
    }, error=> {
    	console.error(error)
    })

location 网址的操作

  • protocal : 获取协议, 返回格式为 http: , 没有 // , 只读

  • hostname : 获取 域名 或 IP 地址 , 只读

  • port : 获取端口号, 只读

  • host : 获取主机和端口, 只读

  • pathname : 获取请求地址 ,只读

  • search : 获取请求参数 , 以 ? 开头, 只读

  • hash : 获取描点, 以 # 开头 ,只读

  • href : 获取 / 跳转 到 指定的 网址

  • assign(url) : 作用等价于 href 、用来做页面跳转, 跳转 记录 会被添加 到 history 中

  • replace(url) : 替换当前网址,该操作 不会加入 history 中。

history

  • forward() : 前进
  • back() : 后退
  • go(n) : 前进 / 后退的步数 、 >0 代码前进、 < 0 代表后退
  • length : 获取历史记录中的数量。
相关推荐
Dragon Wu3 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码10 分钟前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
我狸才不是赔钱货1 小时前
Python的“环境之殇”:从Venv到Conda的终极抉择
开发语言·python·conda
努力进修1 小时前
Rust 语言入门基础教程:从环境搭建到 Cargo 工具链
开发语言·后端·rust
杯莫停丶6 小时前
设计模式之:模板模式
开发语言·设计模式
开发者小天6 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
老猿讲编程7 小时前
C++中的奇异递归模板模式CRTP
开发语言·c++
汤姆yu9 小时前
基于python的化妆品销售分析系统
开发语言·python·化妆品销售分析
ScilogyHunter9 小时前
C语言标准库完全指南
c语言·开发语言
sali-tec9 小时前
C# 基于halcon的视觉工作流-章52-生成标定板
开发语言·图像处理·人工智能·算法·计算机视觉