独立开发者系列(18)——js的window对象

独立开发者,必然要面对JS代码,基本可以认为在脚本语言里面,JS门槛最低,正因为如此,JS也是最受欢迎的开发语言之一。JS的代码运行规律,按照代码模块执行,也就是<script></script> 每次读取到一个模块的时候,加载到分析后,运行一次,所以在同一个标签里面,函数可以放在执行的后面,但是如果在另外一个模块里面,函数一定要出现优先执行顺序,除非通过其他属性改变这种顺序。

  由于JS大部分时候都是操作对象,比如操作window对象,我们开发的时候,如果功能比较多,最好也有对象的方式开发,使用的时候,直接demo.test 这种方式使用,会让程序看上去简化不少。
  这里主要总结JSwindows的对象和使用场景,方便快速反应和实现特定效果。Window对象,其实就是浏览器窗口,很多操作都是对窗口的操作。
场景一: 我需要将整个页面完全加载完成,然后才能操作,防止里面有些代码未加载,代码就直接开始执行,其实就是Jquery的预加载方法,JS和其他代码运行逻辑不通,他是先读到某个代码块,就开始执行代码块的,这样,如果JS写在head里面,会导致无法操作后面的对象,所以需要window.onload=function(){} 加载后执行代码。从其他程序转过来开发的时候,经常会因为代码放置的顺序,导致程序出现意想不到的BUG。

场景二:我需要进行一个判断当前浏览器是否符合我指定的要求,否则就跳出去。非常经常的应用,有些页面不能再微信里面打开,因为微信会严重限制我们本身的JS能力。window.navigator: 提供了关于浏览器的信息,如 navigator.userAgent 可以获取浏览器的版本信息。,读取浏览器的版本信息,用户微信里面打开,就可以获取该参数,然后直接拦截掉。

示例判断是不是微信浏览器:

      function isWeiXin() {

        var ua = window.navigator.userAgent.toLowerCase();

            //通过正则表达式匹配ua中是否含有MicroMessenger字符串

            if (ua.match(/MicroMessenger/i) == 'micromessenger') {

                return true;

            } else {

                return false;

            }

        }

如果判断是在微信浏览器里面,就开始做微信浏览器内部的操作。 手机端浏览器的判断:

function detectBrowser() {

  const userAgent = navigator.userAgent;

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

    return 'Mobile';

  } else {

    return 'Desktop';

  }

}

const browserType = detectBrowser();

console.log(`当前浏览器类型: ${browserType}`);

获取当前的地理定位,由于geo的API接入,浏览器具备了获取地理定位能力。HTML5提供了Geolocation API,允许网页在用户授权的情况下访问设备的地理位置信息。Geolocation API可以结合GPS、Wi-Fi。

navigator.geolocation.getCurrentPosition(showPosition, showError); 获取当前位置的实现

function showPosition(position) {

  const latitude = position.coords.latitude;

  const longitude = position.coords.longitude;

  console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);

  // 在这里可以根据经纬度做进一步处理,如在地图上显示位置等

}

//失败

function showError(error) {

  switch(error.code) {

    case error.PERMISSION_DENIED:

      alert("User denied the request for Geolocation.");

      break;

    case error.POSITION_UNAVAILABLE:

      alert("Location information is unavailable.");

      break;

    case error.TIMEOUT:

      alert("The request to get user location timed out.");

      break;

    default:

      alert("An unknown error occurred.");

      break;

  }

}

场景四:我们获取访问的链接是否合法,或者是否被串改,类似很多邮件的认证链接。url?auth=XXXXXXXXXXXXXXXXX,如果链接被中途修改,或者写错,只写了url,没有获取到auth参数,直接跳到我们指定的页面。var queryString = window.location.search; //读取链接里面?后面的参数。window.location.href = tiaozhuanURL; 跳转到的URL,也用于当一些非法页面访问或者错误页面,访问三秒之后跳转到主页等场景。window.location.origin(属性返回当前 URL 的源(协议 + 域名 + 端口)。它是由协议、主机名和端口号组成的字符串,不包括路径或查询字符串)

一个XSS的经典实现,执行某个window.location.href ,跳转到指定的URL(遥控的URL,该URL携带了跳过来的网址并写入了cookie信息)这样就能实现进入被攻击者后台目的。

场景五:window的socket对象,实现socket编程。Socket实现长链接。聊天室/交易所/游戏,经常使用到的技术

​ Web Socket(套接字)的目标是通过一个长时连接实现与服务器全双工、双向的通信。在 JavaScript 中创建 Web Socket 时,一个 HTTP 请求会发送到服务器以初始化连接。服务器响应后,连接使用 HTTP 的 Upgrade 头部从 HTTP 协议切换到 Web Socket 协议。这意味着 Web Socket 不能通过标准 HTTP 服务器实现,而必须使用支持该协议的专有服务器。因为 Web Socket 使用了自定义协议,所以 URL方案(scheme)稍有变化:不能再使用 http://或 https://, 而要使用 ws://和 wss://。前者是不安全的连接,后者是安全连接。在指定 Web Socket URL 时,必须包含 URL 方案,因为将来有可能再支持其他方案。使用自定义协议而非 HTTP 协议的好处是,客户端与服务器之间可以发送非常少的数据,不会对 HTTP 造成任何负担。使用更小的数据包让 Web Socket 非常适合带宽和延迟问题比较明显的移动应用。 使用自定义协议的缺点是,定义协议的时间比定义 JavaScript API 要长。Web Socket 得到了所有主流浏览器支持。Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同,Web Socket 不使用 HTTP,而使用了自定义协议,目的是更快地发送小数据块。这需要专用的服务器,但速度优势明显。
 实现代码:


const socket = new WebSocket('wss://example.com/socket');
//打开
socket.onopen = function(event) {
  console.log('连接打开:', event);
};
//发送
socket.send('你好,服务器!');
//接收消息
socket.onmessage = function(event) {
  console.log('收到消息:', event.data);
};
//关闭
socket.onerror = function(error) {
  console.error('连接错误:', error);


 

其他场景: window.setInterval() 定时运行某个函数   倒计时不断,基本倒计时会用到该函数

当前当前窗口的前一页和后一页,就是我们平时最常用的,后退或者前进history.go()

弹框报错提示,alert 直接弹框,默认我们使用的alert就是window对象的弹框,我们最常用的打印console.log() 也是属于window对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/769975.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年上半年网络工程师下午真题及答案解析

试题一(20分) 某高校网络拓扑如下图所示&#xff0c;两校区核心&#xff08;CORE-1、CORE-2&#xff09;&#xff0c;出口防火墙&#xff08;NGFW-1、NGFW-2&#xff09;通过校区间光缆互联&#xff0c;配置OSPF实现全校路由收敛&#xff0c;两校区相距40km。两校区默认由本地…

「媒体邀约」苏州媒体宣传服务公司

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 苏州的媒体资源相当丰富&#xff0c;涵盖了报纸、电视、广…

postman请求访问:认证失败,无法访问系统资源

1、使用postman时&#xff0c;没有传入相应的token&#xff0c;就会出现这种情况&#xff0c;此时需要把token放进去 发现问题: { "msg": "请求访问&#xff1a;/getInfo&#xff0c;认证失败&#xff0c;无法访问系统资源", "code": 401 } 1…

金属制品行业企业数字化转型实践

金属制品行业总体上存在着企业数量多、规模小、管理流程复杂等特点。而在数字化应用方面&#xff0c;调查显示&#xff1a;金属制品行业企业信息化总体应用水平低&#xff0c;信息系统建设水平尚处于一般事务处理和简单信息管理阶段&#xff0c;“信息孤岛”问题严重。在信息化…

最新发布!MySQL 9.0 的向量 (VECTOR) 类型文档更新

7月1日&#xff0c;MySQL 9.0.0 创新版本, 8.4.1 LTS, 8.0.38 三版齐发。 发版当天安装包已经可以下载&#xff0c;我也在第一时间做了分享&#xff1a; MySQL 9.0.0 新鲜出炉&#xff01;支持向量类型 当时参考手册还未上线&#xff0c;这两天文档虽已上线&#xff0c;但似乎仍…

RPM包管理-rpm命令管理

1.RPM包命令原则 所有的rpm包都在光盘中 例&#xff1a;httpd-2.2.15-15.e16.centos.1.i686.rpm httpd 软件包名 2.2.15 软件版本 15 软件发布的次数 e16.centos 适合的Linux平台 i686 适合的硬件平台…

springboot酒店管理系统-计算机毕业设计源码93190

目 录 摘 要 1 绪论 1.1 选题背景与意义 1.2开发现状 1.3论文结构与章节安排 2 酒店管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析…

【计算机视觉】基于OpenCV的直线检测

直线检测原理 霍夫变换是图像处理必然接触到的一个算法&#xff0c;它通过一种投票算法检测具有特定形状的物体,该过程在一个参数空间中通过计算累计结果的局部最大值得到一个符合该特定形状的集合作为霍夫变换结果&#xff0c;该方法可以进行圆&#xff0c;直线&#xff0c;椭…

docker安装ElasticSearchKibana

本文参考以下两篇文章 ✅ElasticSearch&Kibana 部署 云效 Thoughts 企业级知识库 (aliyun.com) docker安装ElasticSearch&Kibana - 飞书 安装elasticsearch 使用docker下载es&#xff1a; docker pull elasticsearch:8.13.0 挂载配置 创建挂在文件目录 mkdir…

Hadoop3:集群压测-读写性能压测

一、准备工作 首先&#xff0c;我们要知道&#xff0c;平常所说的网速和文件大小的MB是什么关系。 100Mbps单位是bit&#xff1b;10M/s单位是byte ; 1byte8bit&#xff0c;100Mbps/812.5M/s。 测试 配置102、103、104虚拟机网速 102上用Python开启一个文件下载服务&#x…

职升网:注会考试科目搭配策略建议!

一、CPA考试特点概述 CPA&#xff08;注册会计师&#xff09;考试是一个综合性极强的考试&#xff0c;分为专业阶段和综合阶段。专业阶段涵盖了《会计》、《审计》、《财务成本管理》、《税法》、《经济法》和《公司战略与风险管理》六大科目。这些科目不仅知识点繁多&#xf…

轻松搞定Docker!教你一键删除所有镜像!

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 Docker 是一种流行的容器化平台,它提供了一种轻量级且可移植的方式来打包、分发和运行应用程序。 在使用 Docker 进行应用程序开发和部署时,我们通常会创建和使用各种镜像。然而,随着时间的推移,我们可能会积累大量的镜…

Ubuntu TensorRT安装

什么是TensorRT 一般的深度学习项目&#xff0c;训练时为了加快速度&#xff0c;会使用多 GPU 分布式训练。但在部署推理时&#xff0c;为了降低成本&#xff0c;往往使用单个 GPU 机器甚至嵌入式平台&#xff08;比如 NVIDIA Jetson&#xff09;进行部署&#xff0c;部署端也…

Keil用ST-LINK下载STM32程序后不自动运行

之后程序可以运行了&#xff0c;但是串口还没有输出&#xff0c;在debug模式下都是ok的。

Richtek立锜科技车规级器件选型

芯片按照应用场景&#xff0c;通常可以分为消费级、工业级、车规级和军工级四个等级&#xff0c;其要求依次为军工>车规>工业>消费。 所谓“车规级元器件”--即通过AEC-Q认证 汽车不同于消费级产品&#xff0c;会运行在户外、高温、高寒、潮湿等苛刻的环境&#xff0c…

重磅!首本大模型中文新书发布,复旦最新《大规模语言模型·从理论到实践》,理论+代码

复旦大学自然语言处理实验室张奇教授、桂韬研究员、郑锐博士生以及黄萱菁教授结合之前在自然语言处理领域研究经验&#xff0c;以及分布式系统和并行计算的教学经验&#xff0c;通过在大语言模型实践和理论研究的过程中&#xff0c;历时 8 个月完成本书《大规模语言模型从理论到…

【数学建模】 数据处理与拟合模型

文章目录 数据处理与拟合模型1. 数据与大数据1.1 什么是数&#xff1f;什么是数据&#xff1f;1.2 数据与大数据1.3 数据科学的研究对象 2. 数据的预处理2.1 为什么需要数据预处理2.2 使用pandas处理数据的基础2.3 pandas常用方法总结2.4 数据的规约1) 维度规约2) 数值规约3) 数…

Excel中按列的首行字母顺序,重新排列(VBA脚本)

排序前 要求对4列数据按照第一行abcd的顺序排列 VB脚本如下&#xff1a; 要使用这个脚本&#xff0c;请按照以下步骤操作&#xff1a; 打开Excel&#xff0c;然后按下 Alt F11 打开VBA编辑器。在VBA编辑器中&#xff0c;选择“插入” > “模块”&#xff0c;在打开的模块…

LineageOs-21.0系统编译问题

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

35 智能指针

目录 为什么需要智能指针&#xff1f;内存泄露智能指针的使用及原理c11和boost中智能指针的关系RAII扩展学习 1. 为什么需要智能指针&#xff1f; 下面我们先分析一下下面这段程序有没有什么内存方面的问题&#xff1f; int div() {int a, b;cin >> a >> b;if (…
最新文章