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

智能推荐

高德地图 只显示某个地区或省份,并设定显示范围_高德地图只显示某个地区-程序员宅基地

文章浏览阅读1.4w次,点赞4次,收藏30次。高德地图 只显示某个地区或省份,并设定显示范围_高德地图只显示某个地区

自动化与智能化并行:数字化运维体系助力企业腾飞-程序员宅基地

文章浏览阅读5.4k次,点赞154次,收藏120次。*《数字化运维:IT运维架构的数字化转型》**以传统运维管理体系(PPTR)为基座,在融合数字化转型、ITIL4、DevOps、SRE以及敏捷精益思想的基础上,首先提出了数字化运维管理体系 OPDM(Operation Process Data Measurement,平台化工具、高速化流程、数据化驱动、体系化度量),然后详细讲解了数字化运维一体化平台的建设路径和方法。在数字化转型的过程中,构建数字化运维体系显得尤为重要,它不仅是企业信息化建设的基石,更是推动企业数字化转型走向深入的关键环节。

转载:十款主流科研绘图软件-程序员宅基地

文章浏览阅读6.4k次,点赞2次,收藏15次。2_科研绘图软件

关于rk3588s使用facenet-pytorch-main进行onnx的转换以及RKNN生成操作_reducel2-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏13次。关于rk3588s使用facenet-pytorch-main进行onnx的转换以及RKNN生成操作_reducel2

aar打包依赖 android_android中怎么把module打包成aar文件,以及怎么使用?-程序员宅基地

文章浏览阅读467次。何为aar包?jar与aar的简单区别:*.jar:只包含了class文件与清单文件 ,不包含资源文件,如图片等所有res中的文件。*.aar:包含所有资源 ,class 以及 res 资源文件全部包含一、在android studio中新建moudle1、新建module或者导入:file->new->import->new module/import module新..._android 模块化开发打包成aar再调用

django 查询条件 正则查找regex 200316_django正则查询-程序员宅基地

文章浏览阅读393次。正则查找查找正则以某开头的_django正则查询

随便推点

curl ajax 区别,Curl: RE: Curl and Ajax-程序员宅基地

文章浏览阅读172次。Date: Tue, 12 May 2009 15:48:13 +0000Hello,Thank you for quick reply.Login script ;$cookie_file_path = "/home/xxxxx/public_html/cookie.txt";$fp = fopen($cookie_file_path,'wb');fclose($fp);$agent = "Mo..._curl请求和ajx请求的区别

【QT+QGIS跨平台编译】018:【OpenSSL+Qt跨平台编译】(基于QT进行配置)_qgis ssl模式-程序员宅基地

文章浏览阅读598次,点赞14次,收藏4次。通过一套OpenSSL代码和框架,实现OpenSSL跨平台编译。在Qt环境下,集成OpenSSL库的头文件、库文件,构建跨平台编译的pro文件。通过构建的一套配置工程,基于Qt Creator IDE,完成跨平台编译实践。在Windows、Linux、MacOS等操作系统上进行测试,成功编译,形成的成果(头文件、库文件等)可在不同系统下调用或使用,从而更好地构建跨平台解决方案。采用的是OpenSSL 1.1版本。读者可参考博客中的集成原理和pro文件,构建不同版本的OpenSSL跨平台包。_qgis ssl模式

Oracle 官方Java Jdk1.8_API帮助文档+Android 开发帮助文档(中英文版)_oracle官网下载的jdkapi没中文的吗-程序员宅基地

文章浏览阅读1.6k次。Oracle 官方 Java JDK1.8_API 帮助文档(英文)JDK 1.8 API 谷歌翻译版 密码:yupnAndroid API 开发文档 (中文版)密码:nhc4Windows系统下阅读CHM:参考 百度经验Mac 阅读CHM格式的文档推荐:CHM Read App Store有下载出现乱码:解决方案:显示-文档编码-Unicode(UTF-8) ..._oracle官网下载的jdkapi没中文的吗

[一天一项目]统计元音字母_用switch语句编写程序,统计输入的一串字母中元音字母(a,e,i,o,u)的总个数和每个元-程序员宅基地

文章浏览阅读1.2k次。统计元音字母——输入一个字符串,统计处其中元音字母的数量。更复杂点的话统计出每个元音字母的数量。统计元音字母,其实和拉丁猪文字游戏有异曲同工之妙,算法其实差不多,但是统计元音字母有两种理解方式:计算总的元音字母出现次数计算每个元音字母出现的次数下面列出两种解决方法。//如果不需要具体区分每个元音字母出现的次数 private static void count(String conte_用switch语句编写程序,统计输入的一串字母中元音字母(a,e,i,o,u)的总个数和每个元

实验7-1-7 查找整数 (10分)_【id:412】【11分】g. 实验7-1-7 查找整数 (10 分) 题目描述 本题要求从输入的n-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏2次。本题要求从输入的N个整数中查找给定的X。如果找到,输出X的位置(从0开始数);如果没有找到,输出“Not Found”。输入格式:输入在第一行中给出两个正整数N(≤20)和X,第二行给出N个整数。数字均不超过长整型,其间以空格分隔。输出格式:在一行中输出X的位置,或者“Not Found”。输入样例1:5 73 5 7 1 9输出样例1:2输入样例2:5 73 5 8 1 9输出样例2:Not Found#include<stdio.h>int main(){_【id:412】【11分】g. 实验7-1-7 查找整数 (10 分) 题目描述 本题要求从输入的n个

Jetpack Compose中的副作用_disposableeffect-程序员宅基地

文章浏览阅读2.3k次,点赞4次,收藏7次。从本质上讲,副作用是任何超出函数控制和作用域的东西。副作用会使函数变得不确定,因此它们使开发人员难以推理代码。这对于React、Compose这类的声明式UI框架至关重要,因为它们都是通过函数(组件)的反复执行来渲染UI的,函数执行的时机和次数都不可控,但是函数的执行结果必须可控,因此,我们要求这些函数组件必须用纯函数实现。_disposableeffect

推荐文章

热门文章

相关标签