Web前端基础篇-HTML-01-BOM浏览器对象模型

BOW浏览器对象模型

所谓的BOW浏览器对象就是可以通过JavaScript访问window的属性

tmpdir__17_9_7_15_04_07.jpg

本文所有要讲的梳理的知识点如下：

• screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度；

• frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。

• location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。

• history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

• navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息

一、window的尺寸screen

screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度

window的尺寸特别多，如果您还是感觉杂乱无章，那么你直接看这边文字就可以啦

整个屏幕的宽高 - 固定值
window.screen.width 
window.screen.height

整个屏幕可用宽高：即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度
屏幕高度 height - 任务栏高度 = availHeight -固定值
window.screen.availWidth
window.screen.availHeight

当前浏览器宽高：可以改变，获取的是当前的浏览器size  -不固定值
window.outerWidth
window.outerHeight

 当前浏览器内页面可用高度 = 浏览器高度 - 工具栏 - 浏览器边框 - 滚动条 - 底部调试窗口
 window.innerWidth
 window.innerHeight

  body总宽高
 document.body.offsetWidth
 document.body.offsetHeight

body展示的高度- 表示body在浏览器内显示的区域高度
document.body.clientWidth
document.body.clientHeight

二、frames - HTML 子框架

frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文

iframe 与 window关系：

1、浏览器为原始文档html创建一个 window 对象
2、如果html里面有一个或者多个iframe 或者frame标签，浏览器在为 每个框架创建额外的 window 对象
3、 创建的window叫做子窗口，有可能被原始窗口影响

// true 最外层的框架，也就是整个浏览器的窗口
const  result = window == window.top;   

//true  当前框架的框架，而self对象则指的是window  self是一个全局变量
const  result3 = window == window.self;

//true  当前框架的框架，而self对象则指的是window
 const  result2 = window == window.window; 

//true  当前框架的框架，而self对象则指的是window
 const  result4 = window == window.parent; 

三、location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。

window.location 对象用于获得当前页面的地址URL，并把浏览器重定向到新的界面

 1. 刷新页面
window.location.reload();

 2. 本窗口打开一个新的页面
window.location.assign('https://www.baidu.com')
window.location.href = "https://www.baidu.com";
window.open('./html-two.html','自定义名称');

 3.注意
不能调整非 window.open 方法打开的窗口或 Tab 的大小
 window.resizeTo(200,200);  // 无效

location对象的属性解析：

location.href 全路径
location.protocol 协议
location.host 域名+端口号 = location.hostname + location.port
location.hostname 域名
location.port 端口号
location.pathname 当前页面的路径和文件名
location.search 参数

四、history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

后退
window.history.back();

前进
window.history.forward();
 
等价
window.history.go(-1) = window.history.back();
window.history.go(1) = window.history.forward();

五、navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息；

 let content = "";
content = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
content += "<p>浏览器名称: " + navigator.appName + "</p>";
content+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
content+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
content+= "<p>硬件平台: " + navigator.platform + "</p>";
content+= "<p>用户代理: " + navigator.userAgent + "</p>";
content+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById('browser-info').innerHTML = content

结果：
浏览器代号: Mozilla
浏览器名称: Netscape
浏览器版本: 5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
启用Cookies: true
硬件平台: MacIntel
用户代理: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
用户代理语言: zh-CN

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
Web前端基础篇-HTML-02-HTML的生命周期
Web前端基础篇-HTML-03-事件处理系统
Web前端基础篇-HTML-04-HTML 渲染流程
Web前端基础篇-HTML5-05-最全本地存储总结
Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制