JavaScript Windows 浏览器对象模型

Window 对象

  • BOM 的核心就是 window 对象
  • 所有浏览器都支持 window 对象。它表示浏览器窗口。
  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
  • 全局变量是 window 对象的属性。
  • 全局函数是 window 对象的方法。
  • HTML DOM 的 document 也是 window 对象的属性之一

定义全局变量与在 window 对象上直接定义属性差别。

1、全局变量不能通过 delete 操作符删除;而 window 属性上定义的变量可以通过 delete 删除

var num=123;
window.str="string";
delete num;
delete str;
console.log(num); //123
console.log(str); //str is not defined
//全局变量不能通过 delete 删除,因为通过 var 定义全局变量会有一个名为 [Configurable] 的属性,
//默认值为 false,所以这样定义的属性不可以通过 delete 操作符删除

2、访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。

var newValue=oldValue; // 报错:oldValue is not defined
var newValue=window.oldValue; // 不会报错
console.log(newValue); // undefined

3、有些自执行函数里面的变量,想要外部也访问到的话,在 window 对象上直接定义属性。

方法

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

属性

screen

包含有关用户屏幕的信息
window.screen对象在编写时可以不使用 window 这个前缀。

  • screen.availWidth - 可用的屏幕宽度
    • 返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
    • document.write("可用宽度: " + screen.availWidth);
  • screen.availHeight - 可用的屏幕高度
    • 返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
    • document.write("可用高度: " + screen.availHeight);
  • 总宽度
    • document.write(screen.width + "*" + screen.height);
  • 色彩深度
    • document.write(screen.colorDepth);
  • 色彩分辨率
    • document.write(screen.pixelDepth);

location

用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http: 或 https:)
  • location.href 属性返回当前页面的 URL。document.write(location.href);
  • location.pathname 属性返回 URL 的路径名。document.write(location.pathname);
  • location.assign(url) 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。
  • location.replace(url) 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的

history

包含浏览器历史
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

  • history.back()加载历史列表中的前一个 URL,和在浏览器中点击后退按钮是相同的
  • history.forward() 加载历史列表中的下一个 URL,和在浏览器中点击前进按钮是相同的

navigator

包含有关访问者浏览器的信息。
在编写时可不使用 window 这个前缀。

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

警告!!!

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 “window.opera”,您可以据此识别出 Opera。
例子:if (window.opera) {…some action…}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flowable-服务-微服务任务

目录 定义图形标记XML内容界面操作 定义 Sc 任务不是 BPMN 2.0 规范定义的官方任务&#xff0c;在 Flowable 中&#xff0c;Sc 任务是作为一种特殊的服务 任务来实现的&#xff0c;主要调用springcloud的微服务使用。 图形标记 由于 Sc 任务不是 BPMN 2.0 规范的“官方”任务…

CASAIM自动化平面度检测设备3D扫描零部件形位公差尺寸测量

平面度是表面形状的度量&#xff0c;指示沿该表面的所有点是否在同一平面中&#xff0c;当两个表面需要连接在一起形成紧密连接时&#xff0c;平面度检测至关重要。 CASAIM自动化平面度检测设备通过搭载领先的激光三维测头和智能检测软件自动获取零部件高质量测量数据&#xf…

vue_router__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

你所建立的项目 是 vue2x &#xff0c;但是却下载了 vue-router4x 而 vue-router4x 适用于 vue3x 所以你需要卸载 vue-router4x&#xff0c;重新下载 vue-router3x 卸载&#xff1a; npm uninstall vue-router 安装&#xff1a;(3版本&#xff09; npm i vue-router3

剑指offer刷题笔记--Num61-68

1--扑克牌中的顺子&#xff08;61&#xff09; 主要思路&#xff1a; 五个数是顺子的充要条件&#xff1a;① 最大值 - 最小值 < 5&#xff08;大小王除外&#xff09;&#xff1b;② 没有出现重复的值&#xff08;大小王除外&#xff09;&#xff1b; 判断是否出现重复的值…

【Java】java和kotlin关于Json写文件

Java写json文件 public class WriterJson {public static void main(String[] args) {// 创建一个 JSON 对象JSONObject jsonObject new JSONObject();jsonObject.put("case", "testtest");JSONObject jsonObjects new JSONObject();jsonObjects.put(&q…

IDEA如何快捷创建serialVersionUID【详细图解】

在Java Bean&#xff0c;快速创建serialVersionUID&#xff0c;详细操作流程如下&#xff1a; 1.File->Settings->Editor->Inspections 在搜索框里搜索 Uid,选择下图中勾选的选择 2.如何使用 双击选中需要序列化Uid的类名&#xff0c;使用Alt enter&#xff0c;快捷…

Webpack5 生产模式压缩图片ImageMinimizerPlugin

文章目录 一、 ImageMinimizerPlugin是什么&#xff1f;二、已经有了asset&#xff0c;为什么需要ImageMinimizerPlugin&#xff1f;三、怎么使用ImageMinimizerPlugin&#xff1f;四、ImageMinimizerPlugin压缩的成果 一、 ImageMinimizerPlugin是什么&#xff1f; 它的实际依…

Java里的static import使用小结

Java里的static import使用小结 换了工作要把Java重新捡起来了&#xff0c;这个在大学里用过的语言&#xff0c;虽然不复杂&#xff0c;还是有一些奇怪的地方的。比如static Slgluimport。 Static import是JDK 1.5中引进的特性&#xff0c;不过读大学那会还真没注意到。它的作…

机器学习 | Python实现NARX模型预测控制

机器学习 | Python实现NARX模型预测控制 目录 机器学习 | Python实现NARX模型预测控制效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 机器学习 | Python实现NARX模型预测控制 研究内容 贝叶斯黑盒模型预测控制,基于具有外源输入的非线性自回归模型的预期自由能最…

微信小程序防盗链referer问题处理

公司使用百度云存储一些资源&#xff0c;然后现在要做防盗链&#xff0c;在CDN加入Referer白名单后发现PC是正常的&#xff0c;微信小程序无法正常访问资源了。然后是各种查啊&#xff0c;然后发现是微信小程序不支持Referer的修改&#xff0c;且在小程序开发工具是Referer是固…

将程序打包成单一一个可执行文件

最近做了一个界面交互渲染的小项目&#xff0c;项目主要的功能是通过TCP接收数据然后在界面中渲染出对应的状态。由于用户的最大需求是炫酷&#xff0c;于是为了方便实现特殊的交互逻辑&#xff0c;我选择用freeglut自行实现了界面的交互和渲染&#xff0c;又用OpenCV做了部分图…

图数据库Neo4j学习四——Spring Data NEO

1配置 1.1Maven依赖 <!--neo4j --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-neo4j</artifactId> </dependency>1.2yml配置 spring:data:neo4j:uri: bolt://localhost:76…

IO进、线程——线程(线程的创建、线程的退出、线程的回收、线程的分离和多线程并发编程)

线程 并发执行的轻量级进程 进程是资源分配的最小单位&#xff0c;线程是任务调度的最小单位 线程是进程的一部分&#xff0c;是任务调度的最小单位。一个进程可以包含多个线程&#xff0c;这些线程可以并发执行&#xff0c;共享进程的资源&#xff0c;但每个线程都有自己的…

QT--day4(定时器事件、鼠标事件、键盘事件、绘制事件、实现画板、QT实现TCP服务器)

QT实现tcpf服务器代码&#xff1a;&#xff08;源文件&#xff09; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//给服务器指针实例化空间server new QTc…

excel中使地址按十六进制进行数值递增的函数

这里是尼德兰的喵工具相关文章&#xff0c;欢迎您的访问&#xff01; 如果文章对您有所帮助&#xff0c;期待您的点赞收藏&#xff01; 让我们一起为成为芯片前端全栈工程师而努力&#xff01; 在进行寄存器编写时很多时候会涉及到算地址的问题&#xff0c;通常32bit位宽的寄存…

棕榈酰三肽-38——对额间纹,鱼尾纹,抬头纹和颈纹非常有效

简介 棕榈酰三肽-38由三个氨基酸组成&#xff0c;是一种双氧化的脂肽。这种肽的灵感源自于天然存在于胶原蛋白VI和层粘连蛋白中的一种三肽。 它可以在需要的地方&#xff0c;从内部重建肌肤&#xff0c;使皱纹平滑皮肤得到舒缓&#xff0c;尤其对额间纹&#xff0c;鱼尾纹&…

电教智能云数据可视化平台开发电脑优化日志实录

电教智能云数据可视化平台开发电脑优化日志实录 一、2K和4K弹窗判断二、电能API对接1.电脑爬虫2.电能分组过滤3.数据可视化渲染4.弹窗 三.数组按顺序输出 一、2K和4K弹窗判断 {* 判断2k和4k弹窗 *}{if $dataScene[scene_standard] eq 0}<a class"menuBtn subMenu"…

Spring整合Mybatis、Spring整合JUnit

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Spring整合 一、Spring整合Mybatis1.1 整合Mybatis&#x…

python设计模式

16种设计模式 1.简单工厂模式 内容:不直接向客户端暴露对象创建的实现细节,而是通过一个工厂来负责创建产品类的实例 角色: 工厂角色(Creator) 抽象产品角色(Product) 具体产品角色(Concrete Product) 优点: 1.隐藏了对象创建的实现细节 2.客户端不需要修改代码 缺点: 1.违…

记录一次通过iostat命令定位系统数据库CPU飙升的案例

一、背景 我们有个移动考勤的系统&#xff0c;运维监控系统显示&#xff0c;每到上下班时间&#xff0c;考勤数据库的CPU就飙升到100%&#xff0c;磁盘读写请求等待时间变长&#xff0c;最初无法确定是磁盘性能下降导致的CPU飙升&#xff0c;还是CPU飙升导致的磁盘性能下降&…