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/[email protected] 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

智能推荐

vue 父组件获取接口值传到子组件_Vue中子组件怎么获取父组件的值?(props实现)..._weixin_39990558的博客-程序员秘密

vue中父组件的数据如何传送到子组件中?组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一接口。所以子组件引用父组件就需要用props实现。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不...

软件稳定性测试_麦兜方格的博客-程序员秘密

1 稳定性测试就测试系统的长期稳定运行能力。在系统运行过程中,对系统施压,观察系统的各种性能指标,以及服务器的指标。2 测试场景:模拟平常的压力,模拟实际中日常的用户数进行操作。数据库要存有一定的数据。3 稳定性测试是概率性的测试,就是说即使稳定性测试通过,也不能保证系统实际运行的时候不出问题。所以要尽可能的提高测试的可靠性。可以通过多次测试,延长测试时间,增大测试压力来提高测试的

C++ 递归求数组的平均数_ABC我的博客的博客-程序员秘密

函数返回值类型必须为浮点型。不能为int#include &lt;iostream&gt;using namespace std;float arrayavg(int *A,int n){//返回值类型必须为浮点型。不能为int if(n==0) return A[n]; else return (A[n]+n*arrayavg(A,n-1...

findder 抓包_Fiddler:程序员必备的网络抓包调试工具_Atlas-Geo的博客-程序员秘密

Fiddler是一个非常流行的网络抓包调试工具,也算是比较出名吧。其实说起抓包工具,很多人可能先想到的是wireshark这个经典工具。不过wireshark侧重于网络抓包,可以抓所有类型的数据包,并且解析包的内容。但是Fiddler主要是用来抓取HTTP包的,对HTTP包的内容有多种多样的显示方式。不过考虑到现在大多数时候都用HTTP,所以Fiddler也更加常用一些。捕获网络流量Fiddler...

Blazor 创建一个组件_Cool2Feel的博客-程序员秘密

在客户端应用程序中,创建一个名为Components的新文件夹。这不是一个特殊的名称,我们可以选择任何希望的名称。创建新的Components文件夹后,在其中创建一个名为MyFirstComponent.razor的文件,然后输入以下标记。 &lt;div&gt; &lt;h2&gt;This is my first component&lt;/h2&gt; &lt;/div&gt;现在编辑Index.razor文件。此时,我们可以使用完全限定的名称来引用该组件:&l

博客搬家日记--搭建基于Docker的LNMP环境_night field的博客-程序员秘密

背景由于云主机马上就要到期了,所以最近对比了几家云服务器提供商。最终决定尝试一下 UCloud。于是不得不把原博客(typecho)迁移过来。下面是流水账式地记录一下过程。过程记录本想尝试按照以前的笔记重新搭建一套环境,然后再把数据导过来,但是一想到这一长串的步骤,以及可能碰到的问题就头疼,于是决定构建一个基于容器的 LNMP 环境,一劳永逸,也方便日后继续做博客迁移。当然如果有同学也想搭建基于 LNMP 的博客如 Typecho,则可以参考我的模板:-)(文末有 Github 链接)。注:以下命令

随便推点

html pc页面自动缩放,PC端禁止页面缩放(原生JavaScript)_青幕的博客-程序员秘密

在PC端缩放浏览器的页面主要有三种方式:Ctrl+(+/-)组合Ctrl+鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl+(+/-)组合document.addEventListener('keydown',function(event){if((event.ctrlKey===t...

Json字符串处理_jsonobject 字符串包含[]处理_进阶的程序员的博客-程序员秘密

工作中碰到一个Json对象转List不成功的问题,记录下 public static void main(String[] args) { String keywordUpdate = "{\"keywordTypes\":[{\"adgroupId\":10394588,\"keyword\":\"测试1\"},{\"adgroupId\":10394588,\"keyword

git reset hard/soft/mixed区别_reset type一定要改成hard_惹不起的程咬金的博客-程序员秘密

根据–soft –mixed –hard,会对working tree和index和HEAD进行重置:    git reset --mixed:此为默认方式,不带任何参数的git reset,即时这种方式,它回退到某个版本,只保留源码,回退commit和index信息    git reset --soft:回退到某个版本,只回退了commit的信息,不会恢复到index file一级。

bootstrap-Table 插件 java 实现 table 分页及增删改查_bootstrap分页查询_Mors.的博客-程序员秘密

bootstra-table是一个很好用的插件,可以快速实现table的分页及增删改查这是官方文档地址 : http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/首先引用所需的插件 &amp;lt;link href=&quot;resource/bootstrap.css&quot; rel=&quot;stylesheet&quot; /&amp;gt;&amp;lt;li...

CentOS 8 安装,Linux系统安装,制作启动分区_centos8分区_Lofit的博客-程序员秘密

关键词:CentOS 8 ,Linux,系统安装,启动分区。背景这是在CentOS 8 刚出来的那段时间做的笔记,因为刚出来,在安装上遇到了一些问题,于是记录下来。要达到的 目的:使用一个硬盘,在真机环境直接安装CentOS8 系统(其他linux类似),无需额外的U盘作为启动盘。准备工作(环境、材料)一台可用的电脑(本次使用win10系统)一个硬盘(用作装系统的硬盘)一个CentOS 8系统的iso文件软件:UltraISO(制作启动)、DiskGenius(硬盘分区)安装过程1

推荐文章

热门文章

相关标签