JS知识点拾遗——BOM

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量229 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alun550/article/details/104143382
版权

BOM


 
 

BOM基础知识回顾

 

可视区宽高及其位置

1、获取可视区的宽高：window.innerWidth、window.innerHeight

2、获取滚动条顶部或左侧（可视区顶部或左侧）距离整个文档的顶部或左侧的距离：window.pageXOffset、window.pageYOffset
在这里插入图片描述
 

元素的宽高及其位置

var div = document.getElementsByTagName(‘div’)[0];

1、元素的宽高：
div.offsetWidth、div.offsetHeight

2、元素的位置：
div.offsetLeft、div.offsetTop

 

窗口移动的事件(scroll)

window.onscroll = function(){};
 

浏览器窗口距离整个屏幕的距离

老版本IE会有兼容问题，所以有以下两个写法
window.screenLeft、window.screenTop
window.screenX、window.screenY

是浏览器的窗口（非可视区且包含状态栏、标签栏、书签栏等所有部分）和电脑屏幕左侧或者顶部的距离
 

html多层嵌套html

html的嵌套常见于iframe标签，通过iframe标签在当前页面中引入另外一个html文件。被引入的子页面可以获取到父页面的属性，但父页面无法获取到子页面的属性。
window、window.self — 均指代当前html中的window
window.parent — 指代此html的父级html的window
window.parent.top — 指代当前嵌套关系中最顶级的html的window

注：写代码时，不要使用var parent = xxx;
 

窗口命名

window.name = “xxxx”;
给当前的窗口命名，无论当前窗口内的内容如何变化，此值均保持不变。常用于iframe的窗口标识。
如：先打开www.baidu.com，从控制台中输入 window.name = “a”; 再将页面切换到www.taobao.com，此时依然可以使用window.name获取"a"

注：写代码时，不要使用var name= xxx;
 

窗口焦点变化事件

失去焦点 — blur

window.onblur = function(){
            console.log("movedd");            
        }

在当前窗口失去焦点后触发，如在浏览器中从该标签切换到其他标签时、在当前标签中点击到控制台时、点击其他程序时。

注：仅当失去焦点时触发，再次获得焦点时不会触发。
 
获得焦点 — focus

window.onfocus = function(){
            console.log("getedd");            
        }

在焦点回到当前窗口时触发，若没有焦点再次离开窗口并再次获得的情况下，仅触发一次。

 

窗口提示框

alert()、confirm()、prompt()

alert() — 信息提示框，用于提示信息且仅有确定按钮。

confirm() — 信息提示框，有选择功能，即有确定按钮也有取消按钮。

  • 点击确定，返回true
  • 点击取消，返回false

prompt() — 信息输入框，弹窗并要求用户输入一些东西，既有确定按钮也有取消按钮。

  • 点击确定，会将输入框中的内容返回
  • 点击取消，返回null

注：以上三者均会触发一次 blur 和一次 focus，先blur再focus。
 

滚动条移动

window.scrollBy(x,y) — 每次移动滚动条x,y个单位的，多次调用连续移动

window.scrollTo(x,y) — 移动滚动条至x,y，多次调用仅第一次位置移动

 

打开新窗口

window.open(url, name, features, replace)

如：window.open(“http:www.baidu.com”, “test”, “width=500,height=1000”)

features参数可查看：W3S

在这里插入图片描述

 

关闭窗口

window.close()

 
 

navigator

首先 window.navigator === navigator

属性

navigator.uesrAgent — 浏览器信息

常用于基础的反爬虫、页面的有针对性发送、针对不同平台提供不同功能等场景

如：用此属性值作的浏览器嗅探功能

// Navigator 对象

        // userAgent 做浏览器嗅探

        // onLine 判断是否脱机 （有没有网络）

        // cookieEnabled判断是否能使用cookie

        // 
        var nVer = navigator.appVersion,
            nAgt = navigator.userAgent,
            browser = navigator.appName,
            version = '' + parseFloat(navigator.appVersion),
            majorVersion, nameOffset, verOffset, ix, network = 'unknown';
        // Opera
        if ((verOffset = nAgt.indexOf('Opera')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 6);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
        // Opera Next
        if ((verOffset = nAgt.indexOf('OPR')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 4);
        }
    // MSIE
        else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(verOffset + 5);
        }
    // Chrome
        else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
            browser = 'Chrome';
            version = nAgt.substring(verOffset + 7);
        }
    // Safari
        else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
            browser = 'Safari';
            version = nAgt.substring(verOffset + 7);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
    // Firefox
        else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
            browser = 'Firefox';
            version = nAgt.substring(verOffset + 8);
        }
    // MSIE 11+
        else if (nAgt.indexOf('Trident/') != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(nAgt.indexOf('rv:') + 3);
        }
    // WeiXin
        else if (nAgt.indexOf('NetType/') != -1) {
            browser = 'WeiXin';
            if (nAgt.indexOf('NetType/WIFI') != -1) {
                network = 'WIFI';
            }else if(nAgt.indexOf('NetType/2G') != -1) {
                network = '2G';
            }else if(nAgt.indexOf('NetType/3G+') != -1) {
                network = '3G+';
            }
            verOffset = nAgt.lastIndexOf('/')
            version = nAgt.substring(verOffset + 1);
            if (browser.toLowerCase() == browser.toUpperCase()) {
                browser = navigator.appName;
            }
        }
    // Other browsers
        else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
            browser = nAgt.substring(nameOffset, verOffset);
            version = nAgt.substring(verOffset + 1);
            if (browser.toLowerCase() == browser.toUpperCase()) {
                browser = navigator.appName;
            }
        }

        // trim the version string
        if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix);
        if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix);
        if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix);
        majorVersion = parseInt('' + version, 10);
        if (isNaN(majorVersion)) {
            version = '' + parseFloat(navigator.appVersion);
            majorVersion = parseInt(navigator.appVersion, 10);
        }

        // mobile version
        var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);

        // start system detect
        var os = '';
        var clientStrings = [
            {s: 'Windows 10', r: /(Windows 10.0|Windows NT 10.0)/},
            {s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/},
            {s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/},
            {s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/},
            {s: 'Windows Vista', r: /Windows NT 6.0/},
            {s: 'Windows Server 2003', r: /Windows NT 5.2/},
            {s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/},
            {s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/},
            {s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/},
            {s: 'Windows 98', r: /(Windows 98|Win98)/},
            {s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/},
            {s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
            {s: 'Windows CE', r: /Windows CE/},
            {s: 'Windows 3.11', r: /Win16/},
            {s: 'Android', r: /Android/},
            {s: 'Open BSD', r: /OpenBSD/},
            {s: 'Sun OS', r: /SunOS/},
            {s: 'Linux', r: /(Linux|X11)/},
            {s: 'iOS', r: /(iPhone|iPad|iPod)/},
            {s: 'Mac OS X', r: /Mac OS X/},
            {s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
            {s: 'QNX', r: /QNX/},
            {s: 'UNIX', r: /UNIX/},
            {s: 'BeOS', r: /BeOS/},
            {s: 'OS/2', r: /OS\/2/},
            {s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
        ];
        for (var id in clientStrings) {
            var cs = clientStrings[id];
            if (cs.r.test(nAgt)) {
                os = cs.s;
                break;
            }
        }
        var osVersion = '';
        if (/Windows/.test(os)) {
            osVersion = /Windows (.*)/.exec(os)[1];
            os = 'Windows';
        }
        switch (os) {
            case 'Mac OS X':
                osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
                break;
            case 'Android':
                osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
                break;
            case 'iOS':
                osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
                osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
                break;
        }

        //detect data
        var params = {};
        params.os = os;//操作系统
        params.osVersion = osVersion ? osVersion : 'unknown';//操作系统版本
        params.mobile = mobile;//是否移动端访问
        params.browser = browser;//浏览器
        params.browserVersion = version;//浏览器版本
        params.browserMajorVersion = majorVersion;//浏览器major版本

        //输出对象
        console.log(params);

 

navigator.cookieEnabled — 是否启动cookie

navigator.cookieEnabled

 

navigator.onLine — 浏览器是否有网络

navigator.onLine

 
 

location

属性

location.href — 全url

可读可写

如：location.href = “https://www.baidu.com”

 

location.protocol— url中的网络连接协议

可读可写

如：location.protocol= “http”

 

location.host — url中的域名带端口

可读可写

如：location.host = “www.taobao.com”

 

location.pathname— url中的域名及端口之后的路径

可读可写

如：https://www.w3school.com.cn/jsref/met_win_open.asp 中的 jsref/met_win_open.asp

 

location.search— url中的由?开始的地方

可读可写

 

location.hash— url中的锚点

可读可写，且不刷新页面

如：location.hash= “#10”

 

方法

location.assign() — 加载新文档

功能类似于location.href，在当前窗口跳转到另外一url

如：location.assign(“https://www.taobao.com”)

 

location.reload() — 重新加载文档，类似于刷新

当reload()中不填参数，或者填写false则以浏览器的缓存作为数据源，对当前页面进行刷新。若填写true则对服务器重新发送请求。

如：location.reload()、location.reload(url)

 

location.replace(url) — 在当前文档以新的url替换现在的url

替换，包括在历史记录中也是替换。

如：location.replace(“https://www.taobao.com”)

 

 
 

history

window.history === history
 

属性

 

history.length — 该窗口浏览的url的历史记录数

 

history.back() — 回到该窗口浏览的上一个url

 

history.forward() — 相当于前进，浏览历史的游标向前运动

history.go(x) — 向前或向后移动x个历史记录

  • x为正则在历史记录的当前游标下前进x个记录
  • x为负则在历史记录的当前游标下后退x个记录
JS 知识点拾遗
stanwuc的博客
06-14 348
cookie技术 1、基础 作用：用来保存信息，比如用户名密码； 特点：同一域名所有页面共享一套 cookie；cookie的数量和大小十分有限；cookie有过期时间； 使用：document.cookie属性； 2、使用 getCookie：split分割后遍历； setCookie：重复设置不会覆盖，只会增加； removeCookie：通过设置过期时间为 -1 来实现； 登录页面的例...
控制理论拾遗——Gronwall不等式
qq_40241332的博客
10-26 1542
Gronwall不等式在控制理论中的应用。
JS navigator 对象
书香水墨
04-28 1747
最早由 Netscape Navigator 2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准。虽然其他浏览器也通过其他方式提供了相同或相似的信息（例如，IE 中的 window.clientInformation 和 Opera 中的 window.opera），但 navigator 对象却是所有支持 JavaScript 的浏览器所共有的。与其他 BOM ...
知识点拾遗——Option 将其中的引用转换为值
令狐一冲
12-27 234
先上代码如下： fn main() { let x = 123u8; let y: Option<&u8> = Some(&x); le...
js基础拾遗——中
qq_45046157的博客
08-25 147
作用域与内存 原始值与引用值 ECMAScript包括两种类型的值，引用类型的值和原始类型的值 原始值包括 Undefined、Null、Boolean、Number、String 、Synbol 这六种。原始值是按值访问的，操作的就是存储在变量中的实际值。 引用值是保存在内存中的对象。JavaScript 不允许直接访问内存，所以，操作对象时，操作的是对该对象的引用指针而非实际的对象。因此，引用值的变量是按引用访问的。 复制值 原始类型的值存储在栈中（对象引用指针也在），引用类型存在堆中 原始类型和引用类
强化学习拾遗 —— 再看奖励函数
热门推荐
佚失的诗篇
10-14 1万+
本文介绍设计奖励函数的一般思路及面临的困境，对奖励函数的本质进行分析，从更高的角度建立对奖励函数的深刻认识
函数拾遗——Javascript 进阶知识整理
lqadam的博客
12-21 389
函数 函数也是一个对象，事实上，JS拥有函数的类型，可以通过var fun=new Function(args,fun_body)的形式定义一个函数。函数作为一个对象，有所有对象所共有的性质，同时，函数还有一个特性：可以被调用执行。 函数作为一个对象的方法 一个疑点：当函数作为一个对象的方法时，函数的函数名还是否有意义？因为一般函数作为对象的方法之后，对函数的引用都是通过对象的方法名的。 首先，
Java拾遗——Collection相关的知识回顾
siying8419的博客
06-26 155
ArrayList 方法 Java ArrayList 不为人知的陷阱，及add(int index, E element)和set(int index, E element)两个方法的说明 这个方法说明了ArrayList方法的初始化方法，是将元素一个个add进去之后才会更新size，并不是在初始化的时候就分配了空间，他是动态 例如 ArrayList al = new ArrayL...
javascript 知识点拾遗
steve1988717的博客
04-07 188
js的内置函数（转为数字的几种内置函数 和相关方法） 数组 下面是对数组的追加和删除操作、 下面是数组的截取 下面是把数组转为字符串 下面是把两个数组拼接成一个新的数组，不破坏原数组 创建对象 通过构造函数创建对象 另一种创建对象的方法 下面是对象里面属性和方法访问的两种形式 下面是遍历对象内属性和方法的办法 得到的结果是 字符串也是对象 既然字符串是对象...
javascript基础拾遗——词法作用域
jfkidear的专栏
09-27 308
javascript基础拾遗——词法作用域 　　本来是想写js面向对象笔记（二）关于封装的，但是在敲实例代码的时候，发现对作用域这个东西的概念有点模糊，翻阅了犀牛后，有点感觉了，就想着先记录下此时的感受。 　　之所以取名叫做词法作用域，是这个概念是js中相当基础也是极为重要的，很多想当然的错误或感觉怪异的问题都是和这个东西有关。所以，本文主要说下这个名词的概念以及讨论下他牵扯出
24拓展 3：拾遗补漏 —— 再谈分布式锁(1).md
04-01
分布式锁是为了解决分布式环境下协调不同服务之间资源共享问题的机制。在分布式系统中，由于多个服务实例可能同时运行并共享同一资源，因此需要一种机制来确保资源在任一时刻只能被一个服务实例访问，以避免数据不...
c 语言知识点拾遗 c语言知识死角
05-25
c语言知识点拾遗 c语言知识死角 绝对不容错过
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 387
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 967
关于vue2API的面试题
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 146
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 971
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 739
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 719
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 676
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
C++期末考试复习指南：重点知识点解析
C++期末考试复习要点，包括考试题型、题型分析以及多个核心知识点，如函数重载、引用、new与delete、逻辑值bool型数据、对象与类（类的定义、访问权限、构造函数、析构函数、常对象与常成员、友元和静态成员），以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值