Web前端基础篇-HTML-01-BOM浏览器对象模型 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.innerHeightbody总宽高 document.body.offsetWidth document.body.offsetHeightbody展示的高度- 表示body在浏览器内显示的区域高度 document.body.clientWidth document.body.clientHeight

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

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

// true 最外层的框架，也就是整个浏览器的窗口 constresult = window == window.top; //true当前框架的框架，而self对象则指的是windowself是一个全局变量 constresult3 = window == window.self; //true当前框架的框架，而self对象则指的是window constresult2 = window == window.window; //true当前框架的框架，而self对象则指的是window constresult4 = 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 = "浏览器代号: " + navigator.appCodeName + " "; content += "浏览器名称: " + navigator.appName + " "; content+= "浏览器版本: " + navigator.appVersion + " "; content+= "启用Cookies: " + navigator.cookieEnabled + " "; content+= "硬件平台: " + navigator.platform + " "; content+= "用户代理: " + navigator.userAgent + " "; content+= "【Web前端基础篇-HTML-01-BOM浏览器对象模型】用户代理语言: " + navigator.language + " "; 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-浏览器缓存机制