bom基础知识学习

Bom(Browser Object Model)浏览器对象模型

每打开一个浏览器,就会产生一个window对象(GO),所有BOM的顶层对象就是window

BOM分支

1.screen(获取显示器尺寸,不包含任务栏)

// 属性
screen.availWidth // 显示器宽度
screen.availHeight // 显示器高度

2.navigator(获取浏览器信息)

navigator.appName // 浏览器名称
navigator.appVersion // 浏览器版本
navigator.language // 浏览器语言

3.location(获取地址栏信息)

location.href // 地址栏所有信息
location.port // 端口号
location.search // 获取?后的内容
location.replace(`url`) // 替换当前页面,没有返回值,共用一个窗口(推荐)
location.assign(`url`) // 加载新页面(有返回值,不共用一个窗口)

4.history(历史记录)

history.go(n);
// 取值负数 -n 返回前n页
// 取值0 刷新当前页
// 取值整数n 后面第n页
history.forward() // 返回后一页
history.back() //返回前一页

5.document(DOM)

window可以使用的变量

​ 1.var声明
​ 2.未声明就赋值的变量
​ 3.window.xx 声明的变量

window可以使用的方法

​ 1.字面量声明的函数
​ 2.window.xx = function(){}; 声明的方法

注：delete只对window.xx声明的属性名有效

window方法

alert(`提示框/警示框`);
confirm(`确认框`); // 返回值true,false;
prompt(`输入框`); // 返回用户输入的信息。

window.open("url","_blank","width=300px,height=300px") // 打开新页面
// 参数1：新页面地址
// 参数2：打开方式(_blank,_self)
// 参数3：页面尺寸
// 参数4：Boolean 是否替换当前的历史记录

// 时间函数
// 书写格式:setInterval(参数1,参数2);
// 参数1：被调用的函数(具体的函数体或函数名)
// 注:函数名() 必须是字符串 例:'f72()';常用函数名f72即可。
// 参数2：时间(多长时间调用一次参数1) 单位：毫秒
let i = 1;
function xx(){
    console.log(i++);
}
let itmer = setInterval(xx,1000);
// 停止时间函数
// 书写格式：clearInterval(时间函数)
// itmer是接受时间函数的返回值
clearInterval(itmer);
setTimeout(xx,3000); // 超时函数,3S后执行函数

属性

// 不支持IE8以下
// console.log(`浏览器距离屏幕左侧尺寸：${window.screenX}`);
// console.log(`浏览器距离屏幕顶部尺寸：${window.screenY}`);
// //不支持火狐(FireFox)
// console.log(`浏览器距离屏幕左侧尺寸：${window.screenLeft}`);
// console.log(`浏览器距离屏幕顶部尺寸：${window.screenTop}`);

// // 浏览器尺寸
// console.log(`浏览器宽度outer：${window.outerWidth}`);
// console.log(`浏览器高度outer：${window.outerHeight}`);
// // 视口尺寸(不包含检查器、地址栏、搜索框、滚动条)
// console.log(`浏览器宽度inner：${window.innerWidth}`);
// console.log(`浏览器高度inner：${window.innerHeight}`);

// // 移动条滚动条移动尺寸
// console.log(`浏览器水平滚动条移动尺寸：${window.pageXOffset}`);
// console.log(`浏览器垂直滚动条移动尺寸：${window.pageYOffset}`);
// console.log(`浏览器水平滚动条移动尺寸：${window.scrollX}`);
// console.log(`浏览器垂直滚动条移动尺寸：${window.scrollY}`);