BOM概述

2023年8月21日 187次阅读 来源: 谢聃

BOM 概述

1. BOM（浏览器模型）

Browser Object Moder
浏览器对象模型

  • 什么是BOM ？
  • BOM 是JS 的组成之一，
    • 事项和HTML 的交互
    • BOM 中提供了非常对的对象，用于访问浏览器的
    • 功能，这些功能与任何网页内容都无关
  • BOM 的作用：
    • 将相关的元素组织包裹起来，提供给我们

BOM核心— Window

window 实际上表示浏览器的一个实例，
在浏览器中，window实际上扮演了两个角色
它既是通过JS 去访问浏览器窗口的一个接口
又是ECMAScript 中规定的Global 对象，
可以通过window 来操作整个浏览器

============

  • 拓展：
  • Global 对象

    • 是ECMAScript 总非常特殊的一个对象，
      因为这个对象其实根本不存在。

    • 但是Global 无法通过new 创建。
      但是Global 还拥有自己的属性、方法、
      甚至还拥有全局对象

    • 一般来说 Global 都是默认在浏览器引擎
      启动时候，自动初始化完成的

===========
window 对象就是BOM 的核心对象

  • 所有的对象都是由window 对象延伸出来
  • 全局作用域
var age = 18;  //全局变量

function sayAge(){        // 全局方法
 //   console.log(this.age)  //
        console.log(window.age) ；
}
sayAge();
console.log(age);

window.sayAge();

//this 高级的时候会讲，代表

由于window 对象同时扮演者ECMAScript 的Global
对象，因此所有的全局作用域中声明的全局变量以及函数
等，全部都会变成window 对象的属性和方法

3_window窗口大小问题

  1. 针对 IE9+,Chrome,FireFox,Opera 和safari
  • 浏览器窗口的内部宽度
    window.innerWidth
  • 浏览器窗口的内部高度
    window.innerHeight
var msg="窗口的高度"+window.innerHeight+
"\n窗口的高度"+window.innerWidth;
  1. 针对IE6/ IE7/ IE8 /IE5
  • 支持Chrome 和 FireFox
  • 浏览器内部高度
    docment.documentElement.clientHight
  • 浏览器内部宽度
    docment.documentElement.clientWidth
  1. 兼容的版本
var w =window.innerWidth ||
document.documentElement.clientWidth;
var h = 
alert("窗口宽度"+w)

4_调整窗口大小

调整窗口大小

  • resizeTO()
    调整到指定大小

  • resizeBy()

    • 增加指定的宽度和高度（宽度和高度增加10px）

  • 在IE 8 中 还可以使用

5_打开窗口

open()

  • open(URL,name,features)
    该方法用于打开一个新窗口
    查找一个已经命名的窗口

  • 参数：

  • URL:

    • 可选参数
    • 主要声明了要在浏览器新窗口中显示文档的
    • URL。如果省略该参数或者该参数数值为空
    • 则新窗口不会显示任何文档

  • name ：

    • 可选参数
    • 由多个逗号
    • 包括数字，字母，下划线
    • 声明新窗口的名称
    • 标记<a> <from>的target 属性
    • 如果指定存在窗口
    • 那么open()方法不在创建新窗口
    • 而是返回对该窗口的引用
    • 同时忽略features

  • features:

    • 可选参数
    • 声明标准浏览器特征
    • 如果省略，则新窗口具有所有浏览器
    • 标准特征
    • 如果声明特殊的特征，则按照声明执行
      备注：

=========
窗口特征

  • width/height
  • left/top
    • 默认是像素
  • toolbar
    • yes/no
    • 1/0
  • scrollbar
    • yes/no 默认是 yes
    • 1/0
  • location
    • yes/no
    • 1/0
  • status
    • yes/no
    • 1/0
  • fullscreen 是否使用全屏显示
    • yes/no
    • 1/0 默认是 no
  • menubar 是否显示菜单栏
    • yes/no
    • 1/0
  • resizable 是否可调节尺寸
    • yes/no
    • 1/0
  • titlebar 显示标题栏
    • yes/no
    • 1/0
<body>
<button onclick="openAnother()">打开新窗口</button>
<script type...>
var win;
function openAnother(){
    win = window.open("http....","","w400,h400,toolbar=no,menubar= no,left=50,top = 500");
}
//关闭当前窗口
window.close();//一般设置按钮关闭，这里设置了，打开一瞬间就关闭了。
</scrlpt>
</body>

6_定时器

window 中的定时器

  • window 对象中的…方法
  • JS 中式单线程语言，但是它允许通过设置超时数值，
  • 以及间歇时间来调用代码在特定时间执行
  • 超时。。在指定的时间后去执行某段代码
  • 周期调用时指 每隔指定多长时间….
  • 超时调用
    • window.setIimeout()
  • 周期调用
    • window.setInterval()
estTimeout(code,millisec)
  • 参数：
    • code
  • 指需要放入的函数
    • millisec
  • 执行参数1中的代码
  • 时间单位毫秒（ms）
  • 1s=1000ms
var timeoutId = window.setTimeout(go,3000);

调用函数时需要注意：

  • 传入函数的时候，函数名千万不要加括号
  • 因为这个方法不是由我们自己调用
  • 而是通过引擎去进行调用
function go{
    window.open("http://baidu.com");
}

//取消超时调用
//但是如果当前的超时调用已经执行，那么无效果

timeoutId.cancel;

上面的内容相互叠加就可以了。

定时器

<h1></h1>

var h1 = document.getElementById("time");
window.setIntervall(function){
    var msg = new Date().toLocaleString();
}

讲事件还会将

系统对话框

  • alert() 警告框
  • confirm() 提示框（对话框）
  • prompt() 提示框
var msg = prompt("请输入你的名字")；

if(msg != null && msg.length > 0){
    comsole.log(msg);
}

设置判断

该方法用于清除 超时问题

window.clearTimeout(timeoutId)

8_location 对象

location 对象

  • location 对象可以称为window 的子对象，
  • 也是最有用的BOM 对象之一
  • 我们可以通过window.location 来使用它，
  • 但是一般我们都会将 window省略
  • 提供了域当前窗口加载文档有关信息
  • 导航功能
  • 应用场景：
  • 鱼鱼获取当前网页的URL，并浏览器重定向到新的界面

====

  • location 对象的常用属性
  • host 主机名称和URL端口名
  • hostname 主机名
  • href 完整的URL
  • psthname 路径部分
  • port 端口号
  • protocol 协议
  • search 查询
    协议
document.write("protocol"+location.protocol+
"<br>");

主机名

document.write("hostname"+location.hostname+
"<br>");

将好几个一块写出来

<script...>
document.write("host"+location.host+
"<br>");
document.write("post"+location.post+
"<br>");
document.write("href:"+location.href+
"<br>");
document.write("protocol"+location.protocol+
"<br>");
</script>

HBulider 边改边看模式

9_location常用方法

location 常用方法

  1. assign(url) 加载新的文档
  2. reload(reforce) 重新加载当前文档
  3. replace(newURL) 用新的文档替换当前文档
<body>
<button onclick="" ...>按钮</button>
</body>
<script...>
function openNewURL(){
    location.assign("http://www.baidu.com");
}
function reload(){
    location.reload(true)
}
</script>

reload(reforce)

  • 重新加载当前文档
  • 参数：
  • reforce
    • 可选参数
    • 一般填写 true
    • 该方法如果没有规定参数，或者填写参数为false
    • 采用HTTP 中的头if-Modifed-Since
    • 来检测服务器上文档是否发生改变
    • 如果文档已经改变，则会通过reload()方法
    • 重新加载该文档
    • 如果没有，则该方法从缓存中加载文件
  • 该方法如果有参数，则会从服务器中重新加载
  • 该方法如果没有参数，则会优先从缓存器中重新加载

注意：

  • reload()方法调用之后可能会造成reload 加载顺序
  • 之后的文档不执行
  • 所以一般讲reload()放在最后

relace()

  • 用新的文档代替当前文档
  • 该方法不会在history 对象中生成记录。
  • 使用该方法时，会直接采用新的URL 覆盖History

History 对象

  • history 对象包含用户（当前浏览器窗口）中访问过的URL
  • history 对象是window 对象的一部分
  • 可以进行window.history 进行访问
  • 属性：
  • length
  • 方法：
  • back() 加载history 列表中的前一个URL
  • toward()加载history 列表中的下一个URL
  • go()加载history 列表中指定的某一页面
    • 如果为负数，代表后退
    • 如果为正数，代表前进
<body>
<button onclick="urlCount()">显示历史记录
<script..>
function urlCount(){
    alert("历史列表中"+history.length + "个URL")；
}
function myForward(){
    history.forward();//前进
}
function myBack(){
    history.back();//后退
}
function myGo(){
    history.myGO(-2);//后退两步
</script>

10_navigator 对象

  • navigator 对象包含关于浏览器的信息
  • navigator 对象包含属性描述正在使用的浏览器
  • 我们根据这些属性，进行专门平台的配置
  • 属性：
  • appCodeName
  • appName
  • appVersion
  • systemLanguage
  • language
  • onLine
  • cookieEnable
    • Cookie
    • true
    • false
  • platfrom
  • plugins
  • userAgent

用法：

  • navigator.对应的属性
document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");

相应的修改调用上面的数
移动端 B 阶段
媒体查询
Chrome和userAgent

Screen 对象

Screen 对象

  • Screen 对象 包含有关用于屏幕的信息
  • 虽然Screen 对 在JS 中用处不大，
  • 但是Screen 对象 包含浏览器窗口外部的显示器信息
  • 例如能够获取到相应的 像素宽度和高度等
  • 各个浏览器的Screen 对象 都至少包含以下信息
  • =========
  • windth 像素宽度
  • height 像素高度
  • colorDepth 颜色位数
  • avaiWidth 屏幕的像素宽度减去…任务栏
  • availHeight 屏幕的像素高度减去…任务栏
  document.write("width : " + screen.width +"<br>");
    document.write("height : " + screen.height +"<br>");
    document.write("colorDepth : " + screen.colorDepth +"<br>");
    document.write("availWidth: " + screen.availWidth +"<br>");
    document.write("availHeight: " + screen.availHeight+"<br>");

cookie

注意：本地终端
打开百度
cookie实际是能看到的。

JQ...
首先：E C S Network T（网络加载）P Application <-
Application 里面实际是可以看到的

cookie作用 可以作为1.全局变量2. 3. 4. 注意看
cookie缺陷 1.2.3.4. 针对浏览器 例如看到的百度这边
以后工作注意提前进行加密
1.2.。4.56.7.在控制台会有相应的对应
有心情可以查查，目前对我们游泳的是删，增，查

cookie 存储

有两个词必须要给出的
name和value

  1. 参数1 : cookie 的 name
  2. 参数2: cookie 的 value
  3. 参数3: cookie 的 存储时间（单位 day）
  • cookie 中 name 不同，那么就可以存储多个 cookil
function saveCookie(name,value,expireday){
    //声明一个日期对象
    var date = new Date();
    console.log(date.getDate());
    
    date.setDate(date.getDate()+expireday);
    console.log(date.toGMTString());
}

cookie 的内容其实就是一段纯文本

encodeURLComponent()

  • 该函数可以将字符串作为URL 组件去进行编码
  • 返回值：
  • URLString 的副本，其中某些字符将其
  • 十六进制转义序列化
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";expires = " + date.toGMTString();
            document.cookie = cookieText;
    }
</script>
</html>

储存

function getCookie(name){
    //先去拿到cookie 中的字符串
    var cookieText = document.cookie;
    //获取要查找到的cookie 的name 所在的下标
    var index = cookieText.indexOf(name+"=");
    if(index != -1){
        //查找指定的cookie 结束位置
        var endIndex = 
        cookieText.indexOf
        ...
        //把想要的cookie 中的 value 获取出来
        
    }
}
    原文作者：谢聃
    原文地址: https://www.jianshu.com/p/962ebfbc1f47
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞