Browser 对象实用基础_browser撖寡情-程序员宅基地

技术标签: bom  【前端】JS相关知识  javascript  

学习JS时,大家通常会对dom对象投入更多的精力,而容易忽略browser对象。确实Broswer对象的使用频率不高,但了解一些实用的基础是非常有必要的。

  • window对象 —— 表示浏览器中打开的窗口
  • navigator对象 —— 包含有关浏览器的信息
  • screen对象 —— 包含有关客户端显示屏幕的信息
  • history对象 —— 包含用户(在浏览器窗口中)访问过的 URL
  • location对象 —— 包含有关当前 URL 的信息
  • 存储对象 —— sessionStorage、localStorage

下面介绍一下以下几个对象的一些常用的基础,更多内容请参考官网。

window对象

window对象属性包含了很多常见的属性,如下面会说到的 window.navigator、window.location等等,还有一些我们也可能会用到的属性:

1、window.open, window.opener, window.close

以上属性可用于打开一个新的窗口、返回创建该窗口的window对象的引用,关闭某个窗口,如:

var myWindow;
function openWin(){
    
	myWindow=window.open("","","width=400,height=200");
  myWindow.document.write("<p>这是我的窗口</p>");
  myWindow.focus();
  myWindow.opener.document.write("<p>这个是源窗口!</p>");
}
function closeWin(){
    
	if (myWindow){
    
		myWindow.close();
	}
}

2、window.frames, window.length

以上属性可返回页面中所有的iframe框架,返回框架数量,如:

function myFunction() {
    
		if (window.length) {
    
      window.frames[0].location = "https://www.runoob.com";
	  }
}

3、window.outerWidth, window.outerHeight;pageXOffset、pageYOffset;screenLeft、screenTop; screenX、screenY

以上属性返回 1、一个窗口的外部宽度/高度,包括所有界面元素(如工具栏/滚动条)2、当前页面对于窗口显示区左上角的X、Y位置 3、相对于屏幕窗口的x坐标、y坐标 4、相对于屏幕窗口的x坐标、y坐标

function openWin(){
    
	myWindow=window.open('','');
	myWindow.document.write("<p>这是'我的窗口'");
  myWindow.document.write("<br>ScreenLeft: " + myWindow.outerWidth); // 1920
  myWindow.document.write("<br>ScreenLeft: " + myWindow.outerHeight); // 1080
  myWindow.document.write("<br>ScreenLeft: " + myWindow.pageXOffset); // 100
  myWindow.document.write("<br>ScreenLeft: " + myWindow.pageYOffset); // 100
	myWindow.document.write("<br>ScreenLeft: " + myWindow.screenLeft); // 0
	myWindow.document.write("<br>ScreenTop: " + myWindow.screenTop); // 0
  myWindow.document.write("<br>ScreenLeft: " + myWindow.screenX); // 0
	myWindow.document.write("<br>ScreenTop: " + myWindow.screenY); // 0
}

navigator对象

1、navigator.platform 返回运行浏览器的操作系统平台

用于判断操作系统

document.write("硬件平台: " + navigator.platform);
// 硬件平台: MacIntel

2、navigator.userAgent 返回由客户机发送服务器的user-agent头部的值

用于判断是什么平台打开的页面,如判断是某个app内还是浏览器内,通过指定的关键词匹配

document.write("用户代理: " + navigator.userAgent);
// 用户代理: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36

3、navigator.appVersiton 返回浏览器的平台和版本信息

用于判断浏览器版本

document.write("版本信息: " + navigator.appVersion);
// 版本信息: 5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36

screen对象

screen.height, screen.weight 返回屏幕的总高度、宽度

document.write("总高度: " + screen.height);
// 1080
document.write("总宽度: " + screen.weight);
// 1440

History对象

1、history.length 返回历史列表中的网址数

使用是 history.length,不是history.length()

document.write("历史列表中URL的数量: " + history.length);

2、history.back() 加载 history 列表中的前一个 URL

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)

function goBack(){
    
    window.history.back()
}

3、history.forward() 加载 history 列表中的下一个 URL

调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

function goForward(){
    
    window.history.forward()
}

4、history.go() 加载 history 列表中的某个具体页面

()内参数参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。

Location对象

location对象属性

1、location.host 可读可写,可设置或返回当前 URL 的主机名称和端口号

document.write(location.host);
// www.baidu.com

2、location.herf 可读可写, 可设置或返回当前显示的文档的完整 URL

document.write(location.href);
// https://www.baidu.com/test1/test2?search=test

3、location.pathname 可读可写,可设置或返回当前 URL 的路径部分

document.write(location.pathname);
//  /test1/test2  返回域名后到?前的路径部分

4、location.serch() 可读可写, 可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。

// 返回URL的查询部分。假设当前的URL就是http://www.runoob.com/submit.htm?email=someone@ example.com:
document.write(location.search);
// [email protected]

location对象方法

1、location.reload() 重新载入当前文档

2、location.replace() 用新的文档替换当前文档

存储对象

1、window.localStorage

在浏览器中存储 key/value 对。没有过期时间。

2、window.sessionstorage

在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。

存储对象属性及方法

length 返回存储对象中包含多少条数据
key(n) 返回存储对象中第 n 个键的名称
getItem(keyname) 返回指定键的值
setItem(keyname, value) 添加键和值,如果对应的值存在,则更新该键对应的值。
removeItem(keyname) 移除键
clear() 清除存储对象中所有的键

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cindy647/article/details/110442635

智能推荐

python服务器端开发面试_【网易游戏Python面试】python 服务端开发-看准网-程序员宅基地

文章浏览阅读145次。10.21终面已参加,希望能顺利通过终面拿到offer~一共三轮,电话面试+笔试+视频面试,视频面试3V110月19日投的新媒体运营的简历,HR说因为是周末,等工作日再联系我,在周一下午三点我接到了电话成功通过简历筛选和电话面试,整个电话面试的过程长,大概10分钟左右,因为前期稍微做了一些准备,所以还算对答如流,整个过程顺利,HR现场告诉我通过面试,并随即给我发了笔试题,让我准备一下,最晚三天之..._网易 python游戏服务器

MVC层次划分简述_mvc分层-程序员宅基地

文章浏览阅读6.5k次,点赞12次,收藏38次。MVC层次划分简述写在前面的一段话:首先要知道MVC和三层架构之间有什么关系:MVC:【 Model(数据模型) - View(视图) - Controller(控制器) 】三层架构:【 Presentation tier(展现层) - Application tier(应用层)+Date tier(数据访问层) 】很多人都有一个误解,认为Spring MVC的M、V、C对..._mvc分层

Flink的sink实战之三:cassandra3_flink cassandra-程序员宅基地

文章浏览阅读2.9k次。实践flink数据集sink到cassandra3_flink cassandra

使用docker安装codimd,搭建你自己的在线协作markdown编辑器_群晖 docker 搭建 codimd-程序员宅基地

文章浏览阅读7.1k次,点赞4次,收藏12次。文章目录一、前言二、codimd是什么?2.1 源于hackmd的超好用markdown编辑器2.2 codimd的作用三、安装和使用3.1 安装前需要知道的3.2 安装步骤3.2.1 创建数据库3.2.2 安装git3.2.3 安装docker3.2.4 安装docker compose3.2.5 安装codimd3.2.6 检查是否安装成功3.2.7 放行端口3.2.8 测试使用3.3 开始写..._群晖 docker 搭建 codimd

Json和ajax-程序员宅基地

文章浏览阅读335次。Json json 可以定义多种类型 var jsonObj = { "key1":123, "key2":"name", "key3":[12,"age",true], //数组 "key4":false, "key5":{ //存一个json对象 "key6":456, "key7":"number" }} json其实就是一个Object对象, 他的key值 可以看成对象的一个属性, 获取他的value值...

ssm超市账单管理系统a2e96【独家源码】 应对计算机毕业设计困难的解决方案-程序员宅基地

文章浏览阅读87次。选题背景:超市账单管理系统是一种针对超市行业的管理工具,旨在提供高效、准确、便捷的账单管理服务。随着城市化进程的加快和人们生活水平的提高,超市作为日常生活必需品的主要供应渠道之一,扮演着重要的角色。然而,传统的超市账单管理方式存在一些问题,如手工记录容易出错、数据整理繁琐、信息不透明等。因此,开发一个科技化的超市账单管理系统成为了必要之举。选题意义:首先,超市账单管理系统的开发可以提高账单管理的效率。传统的超市账单管理方式通常需要员工手动记录商品销售信息,并进行数据整理和汇总。这种方式容易出现人为错

随便推点

bookmarks_2021_9_28_拾度智能科技 att7022eu-程序员宅基地

文章浏览阅读1.7k次。书签栏通讯 s7-1200与s7-200smart通讯-工业支持中心-西门子中国IO_deviceS7-1200PROFINET通信ET 200SP 安装视频 - ID: 95886218 - Industry Support Siemens云平台接入在线文档 - 低代码开发嵌入式设备 | 物一世 WareExpress在linux下使用c语言实现MQTT通信(一.MQTT原理介绍及流程图)_qq_44041062的博客-程序员宅基地C mqtt_百度搜索开发快M_拾度智能科技 att7022eu

国家取消职称英语与计算机,全国职称英语考试取消-程序员宅基地

文章浏览阅读1.6k次。职称英语全称为全国专业技术人员职称英语等级考试,是由国家人事部组织实施的一项国家级外语考试。1.概述全国专业技术人员职称英语等级考试是由人力资源和社会保障部组织实施的一项外语考试,它根据英语在不同专业领域活动中的应用特点,结合专业技术人员掌握和应用英语的实际情况,对申报不同级别职称的专业技术人员的英语水平提出了不同的要求。该考试根据专业技术人员使用英语的实际情况,把考试的重点放在了阅读理解上面。全..._全国专业技术人员职称英语等级考试 北京 取消

where里能用max吗_网络里能找到真爱吗?-程序员宅基地

文章浏览阅读42次。恋爱指导篇 知心的小爱“真爱”是一个永不过时的话题,古代的人找对象,靠的是媒妁之言,父母定婚姻。现代的人靠的是相亲,自由恋爱,按理找一个喜欢的人结婚会很幸福,近几年反而离率更高了。古代人认识的人少,交流工具少,最多信鸽传书,信物传情。现代要认识一个人很容易了,最初是电话信息联系。前几年是qq,微信摇一摇,近两年是抖音,快手随便找一找。虽然找对象,寻伴侣更方便了,为何大部分人还是感觉更迷茫,不快乐...

刷题记录第八十天-修剪二叉搜索树-程序员宅基地

文章浏览阅读109次。【代码】刷题记录第八十天-修剪二叉搜索树。

dcm4che,WADO相关-程序员宅基地

文章浏览阅读248次。关于 dcm4che WADO WADO:Web Access to DICOM Objects dcm4che 是一个为医疗保健企业的开源应用程序和工具集合。这些应用程序已经开发了Java编程语言的性能和便携性,在JDK 1.6及更高版本支持部署。在dcm4che项目的核心是一个强大的执行DICOM标准的。该dcm4che-1.x和dcm4che-2.X DICOM Tool..._dcm4che实现wado服务

linux查看zk日志,14.1 zookeeper日志查看-程序员宅基地

文章浏览阅读2.2k次。zookeeper服务器会产生三类日志:事务日志、快照日志和log4j日志。在zookeeper默认配置文件zoo.cfg(可以修改文件名)中有一个配置项dataDir,该配置项用于配置zookeeper快照日志和事务日志的存储地址。在官方提供的默认参考配置文件zoo_sample.cfg中,只有dataDir配置项。其实在实际应用中,还可以为事务日志专门配置存储地址,配置项名称为dataLogD..._linux查看zookeeper日志

推荐文章

热门文章

相关标签