【JS逆向】【10.JavaScript 基础语法】BOM - 浏览器对象window，常用属性方法，窗口操作，对话框，定时器，Navigator对象，location对象，（详细讲解）

My.ICBM

于 2024-01-03 12:34:29 发布

阅读量1.2k

点赞数 24

分类专栏：【高阶】JS逆向爬虫文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43612602/article/details/135358095

版权

【高阶】JS逆向爬虫专栏收录该内容

21 篇文章 8 订阅

订阅专栏

浏览器对象 window

1. window 对象概述

JavaScript的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为"顶层对象"。这就是说，JavaScript的所有对象，都是"顶层对象"的下属。不同的运行环境有不同的"顶层对象"，在浏览器环境中，这个顶层对象就是window对象（w为小写）。
在这里插入图片描述

所有浏览器环境的全局变量，都是window对象的属性。

var a = 1;
window.a // 1

可以简单理解成，window就是指当前的浏览器窗口。

只要指定某个window或帧框（frame）的名字，就可以从这个全局对象读取该窗口的全局变量。比如，某个文档存在一个全局变量x，就可以从iframe的parent.x读取该全局变量。

2. window 对象的属性

属性	说明
document	对话框中显示的当前的文档
frames	表示当前对话框中所有frame对象的集合
location	指定当前文档的URL
name	对话框的名字
status	状态栏中的当前信息
defaultstatus	状态栏的默认信息
top	表示最顶层的浏览器对话框
parent	表示包含当前对话框的父对话框
opener	表示打开当前对话框的父对话框
closed	表示当前对话框是否关闭的逻辑值
self	表示当前对话框
screen	表示用户屏幕，提供屏幕尺寸，颜色深度等信息
navigator	表示浏览器对象，用于获得与浏览器相关的信息
history	屏幕对象，用于操作屏幕宽度高度

通过浏览器的document.compatMode属性确定浏览器对CSS渲染技术的支持：当前主流浏览器都使用Quirks模式和标准模式对页面做不同的处理，通过读取document.compatMode属性的值确定是哪种模式，如果是标准模式返回：CSSICompat，如果使用的Quirks模式，返回的是：BackCompat（但是Opera赋值为QuirksMode），因此一般检测标准模式就可以了

window.name

window.name属性用于设置当前浏览器窗口的名字。它有一个特点，就是浏览器刷新后，该属性保持不变。所以，可以把值存放在该属性内，然后跨页面、甚至跨域名使用。当然，这个值有可能被其他网站的页面改写。

window.name = "Hello World!";
console.log(window.name);

各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。

该属性只能保存字符串，且当浏览器窗口关闭后，所保存的值就会消失。因此局限性比较大，但是与iFrame窗口通信时，非常有用。

widnow.innerHeight，window.innerWidth

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。
注意，这两个属性值包括滚动条的高度和宽度。

window.pageXOffset，window.pageYOffset

window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离。这两个属性的单位为像素。

iframe

window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每个成员对应的是框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

在iframe框架内部，使用window.parent指向父页面。

screen 对象

screen对象包含了显示设备的信息。

属性	描述
availHeight	屏幕像素高度减去系统组件高度
availLeft	没有被系统组件占用的屏幕的最左侧像素
availTop	没有被系统组件占用的屏幕的最顶部像素
availWidth	屏幕像素宽度减去系统组件宽度
height	屏幕像素高度
width	屏幕像素宽度
left	当前屏幕左边的像素距离
top	当前屏幕顶边的像素距离

// 显示设备的高度，单位为像素
screen.height
// 1920
 
// 显示设备的宽度，单位为像素
screen.width
// 1080

一般使用以上两个属性，了解设备的分辨率。上面代码显示，某设备的分辨率是1920x1080。

除非调整显示器的分辨率，否则这两个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。

下面是根据屏幕分辨率，将用户导向不同网页的代码。

if ((screen.width<=800) && (screen.height<=600)) {
    window.location.replace('small.html');
} else {
    window.location.replace('wide.html');
}

Navigator 对象

Window对象的Navigator属性，指向一个包含浏览器相关信息的对象。

属性	说明（`这些属性可能对不同的浏览器有不同的支持`）
appName	返回浏览器的名称
appVersion	返回浏览器的版本号
userAgent	返回浏览器用于HTTP请求的用户代理头的值
appCodeName	返回浏览器的名称
platform	返回运行浏览器的操作系统或硬件平台
cookieEnable	检测浏览器是否支持Cookie。该属性值为Boolean，如果支持Cookie，返回true，否则返回false
systemLanguage	返回操作系统使用的默认语言，该属性值为字符串
userLanguage	返回用户使用的语言，概述性为字符串
language	返回浏览器中使用的默认语言
mimeType	返回一个数组，该数组中的元素代表浏览器支持的mime类型
plugins	返回一个数组，该数组中的元素代表浏览器已经安装的插件

Navigator.userAgent

Navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，更何况各种上网设备层出不穷，难以穷尽。所以，现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。

不过，通过userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含“mobi”字符串。

var ua = navigator.userAgent.toLowerCase();
 
if (/mobi/i.test(ua)) {
    // 手机浏览器
} else {
    // 非手机浏览器
}

如果想要识别所有移动设备的浏览器，可以测试更多的特征字符串。

/mobi|android|touch|mini/i.test(ua)

navigator.plugins

navigator.plugins属性返回一个类似数组的对象，成员是浏览器安装的插件，比如Flash、ActiveX等

location 对象

对于这样一个URL：http://www.maidq.com/index.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分

window.location.href 整个URL字符串(在浏览器中就是完整的地址栏) 本例返回值: - - http://www.maidq.com/index.html?ver=1.0&id=6#imhere
window.location.protocol URL 的协议部分本例返回值:http:
window.location.host URL 的主机部分本例返回值:www.maidq.com
window.location.port URL 的端口部分如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符本例返回值:“”
window.location.pathname URL 的路径部分(就是文件地址) 本例返回值:/fisker/post/0703/window.location.html
window.location.search 查询(参数)部分除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值本例返回值:?ver=1.0&id=6
window.location.hash 锚点本例返回值:#imhere

history对象

每个window都有自己的histroy对象，用于记录首次使用以来用户的导航历史记录

方法	属性
go()	加载history列表中的某个具体页面
back()	加载history列表中的前一个URL
fowward()	加载history列表中的下一个URL

go()

向前，向后导航到历史页，
接收一个参数 num
参数的正负值决定向前还是向后

window.history.go(1);//向前一页
window.history.go(-1);//后退一页

back()

移动到上一个访问页面，等同于浏览器的后退键。

foreward()

移动到下一个访问页面，等同于浏览器的前进键。

history.pushState

pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。pushState() 方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对 URL。URL栏显示新地址, 但是不会加载页面，甚至不会检查页面是否存在，该方法会增加history.length

history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是example.com/1.html，我们使用pushState方法在浏览记录（history对象）中添加一个新记录。

var stateObj = { foo: "bar" };
 
history.pushState(stateObj, "page 2", "2.html");

history.relaceState

replaceState()方法修改当前历史记录实体。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。replaceState() 方法执行后，将会更新当前的state对象或者当前历史实体的URL来响应用户的的动作,URL栏显示新地址, 但是不会加载页面，甚至不会检查页面是否存在。该方法不会增加history.length。

4. window 对象的常用方法

方法	说明
alert()	弹出一个警告对话框
confirm()	在确认对话框中显示指定的字符串
prompt()	弹出一个提示对话框
open()	打开新浏览器对话框，并且显示有URL或名字引用的文档，并设置创建对话框的属性
close()	关闭被引用的对话框
focus()	将被引用的的对话框放在所有打开对话框的前面
blur()	将被引用的的对话框放在所有打开对话框的后面
scrollTo(x,y)	把对话框滚动到指定的坐标
setTimeout(timer)	在指定毫秒后，对传递的表达式求值
setInterval(interval)	指定周期性执行代码
moveTo(x,y)	将对话框移动到指定坐标处
moveBy(offsetx,offsety)	将对话框移动到指定的位移量处
resizeTo(x,y)	设置对话框大小
resizeBy(offsetx,offsety)	按照指定的位移量设置对话框的大小
print()	相当于浏览器工具栏中“打印”按钮
status()	状态条，位于对话框下部的信息条，用于任何时间内信息的提示（有些浏览器不支持）
defaultstatus()	状态条，位于对话框下部的信息条，用于某个事件发生时的信息的提示（有些浏览器不支持）

URL的编码 / 解码方法

JavaScript提供四个URL的编码/解码方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

window.getComputedStyle

getComputedStyle方法接受一个HTML元素作为参数，返回一个包含该HTML元素的最终样式信息的对象。

window.matchMedia

window.matchMedia方法用来检查CSS的mediaQuery语句

5. window 对象的事件

事件	说明
onfocus	当浏览器窗口获得焦点时激活
onblur	当浏览器窗口失去焦点时激活
onload	当文档完全载入窗口时触发，但需注意，事件并非总是完全同步
onunload	当文档未载入时触发
onresize	当用户改变窗口大小时触发
onerror	当出现JavaScript错误时，触发一个错误处理事件
onafterprint	窗口被打印后触发
onbeforeprint	窗口被打印或被打印预览之前激活
onbeforeunload	窗口未被载入之前触发，发生于onunload事件之前
ondragdrop	文档被拖到窗口上时触发（仅用于netspace）
onhelp	当帮助键（通常是F1）被按下时触发
onresizeend	调整大小的进程结束时激活。通常是用户停止拖拽浏览器窗口边角时激活
onresizestart	调整大小的进程开始时激活。通常是用户开始拖拽浏览器窗口边角时激活
onscroll	滚动条往任意方向滚动时触发

window.onerror

浏览器脚本发生错误时，会触发window对象的error事件。我们可以通过window.onerror属性对该事件指定回调函数。

window.onerror = function (message, filename, lineno, colno, error) {
    console.log("出错了！--> %s", error.stack);
};

error事件的回调函数，一共可以有五个参数，它们的含义依次如下。

出错信息
出错脚本的网址
行号
列号
错误对象

老式浏览器只支持前三个参数。

需要注意的是，如果脚本网址与网页网址不在同一个域（比如使用了CDN），浏览器根本不会提供详细的出错信息，只会提示出错，错误类型是“Script error.”，行号为0，其他信息都没有。这是浏览器防止向外部脚本泄漏信息。一个解决方法是在脚本所在的服务器，设置Access-Control-Allow-Origin的HTTP头信息。

Access-Control-Allow-Origin:*

然后，在网页的script标签中设置crossorigin属性。

<script crossorigin="anonymous" src="//example.com/file.js"></script>

上面代码的crossorigin="anonymous"表示，读取文件不需要身份信息，即不需要cookie和HTTP认证信息。如果设为crossorigin=“use-credentials”，就表示浏览器会上传cookie和HTTP认证信息，同时还需要服务器端打开HTTP头信息Access-Control-Allow-Credentials。

并不是所有的错误，都会触发JavaScript的error事件（即让JavaScript报错），只限于以下三类事件：

JavaScript语言错误
JavaScript脚本文件不存在
图像文件不存在
以下两类事件不会触发JavaScript的error事件。
CSS文件不存在
iframe文件不存在

6 . 窗口操作

打开窗口

在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口

window.open(url,target)
## url指的是新窗口的地址:
## target表示打开方式:它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank（默认）和_self

案例 - 点击按钮打开百度网

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		window.open("https://www.baidu.com/");
	};
}

关闭窗口

在JavaScript中，我们可以使用window.close()来关闭一个新窗口

window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		window.close();
	};
}

7. 对话框 alert()，prompt()，confirm()

alert()、prompt()、confirm()都是浏览器用来与用户互动的方法。它们会弹出不同的对话框，要求用户做出回应。

需要注意的是，alert()、prompt()、confirm()这三个方法弹出的对话框，都是浏览器统一规定的式样，是无法定制的。

alert()

alert方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。

## 格式
alert(message);
 
## 实例
alert("Hello World");

confirm()

在JavaScript中，confirm()对话框不仅提示文字，还提供确认
confirm方法返回一个布尔值，如果用户点击“确定”，则返回true；如果用户点击“取消”，则返回false。

## 格式
var result = confirm(message);
 
## 实例
var result = confirm("你最近好吗？");

## 示例
window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		confirm("确定吗？");
	};
}

prompt()

在JavaScript中，prompt()对话框不仅会提示文字，还会返回一个字符串

prompt方法弹出的对话框，在提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。

prompt方法的返回值是一个字符串（有可能为空）或者null，具体分成三种情况：

用户输入信息，并点击“确定”，则用户输入的信息就是返回值。
用户没有输入信息，直接点击“确定”，则输入框的默认值就是返回值。
用户点击了“取消”（或者按了Escape按钮），则返回值是null。

prompt方法的第二个参数是可选的，但是如果不提供的话，IE浏览器会在输入框中显示undefined，Chrome会返回空字符串""。因此，最好总是提供第二个参数，作为输入框的默认值。

## 格式
var result = prompt(text[, default]);
 
## 实例
var result = prompt('您的年龄？', 25)

## 示例
window.onload = function() {
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function() {
		var name = prompt("你的名字？");
		document.write(name);
	};
}

8. 定时器

所谓的"定时器"，指的是每隔一段时间就执行一次代码。在JavaScript中，对于定时器的实现，有以下两组方法。

方法	说明
setInterval()	按照执行的周期（单位为毫秒）调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 方法生成的定时器
clearTimeout()	取消由 setTimeout() 方法生成的定时器

setTimeout 和 clearTimeout

在JavaScript中，我们可以使用setTimeout()方法来"一次性"地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()

setTimeout(code,time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

## 2秒提示欢迎语
window.onload = function() {
	setTimeout("alert('欢迎');",2000);
}

clearTimeout取消执行setTimeout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
         div{width:100px;height:100px;border:1px solid silver;}
    </style>
    <script>
         window.onload=function()
         {
             // 获取元素
             var oBtn=document.getElementsByTagName("input");
             // timer存放定时器
             var timer=null;
             oBtn[0].onclick=function()
             {
                timer=setTimeout(function(){
                   alert("欢迎来到绿叶学习网");
                },2000);
             };
             oBtn[1].onclick=function()
             {
                clearTimeout(timer);
             };
        }
  </script>
</head>
<body>
  <p>点击"开始"按钮，2秒后提示欢迎语。</p>
  <input type="button" value="开始"/>
  <input type="button" value="暂停"/>
</body>
</html>

如果点击【开始】按钮，2秒后就会弹出对话框。如果在2秒内再次点击【暂停】按钮，就不会弹出对话框

setInterval 和 clearInterval

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()

案例 - 实现页面倒计时

### 页面文件 ###
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEXT</title>
    <script src="js/index.js"></script>
</head>
<body>
    倒计时：<div id="num">5</div>
</body>
</html>

###  js/index.js 文件 ### 
var n = 5;
window.onload = function() {
	setInterval(countDown,1000);
}
function countDown() {
	if (n > 0) {
		n--;
		document.getElementById("num").innerHTML = n;
	}
}

案例 - 实现控制 div 块变色

### 页面文件 ###
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEXT</title>
    <script src="js/index.js"></script>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <input type="button" value="开始"/>
    <input type="button" value="暂停"/>
    <div></div>
</body>
</html>


### js/index.js 文件 ###
window.onload = function() {
	var oBtn = document.getElementsByTagName("input");
	var oDiv = document.getElementsByTagName("div")[0];
	var colors = ["red","blue","orange","yellow","purple","green"];
	// 定义定时器
	var timer = null;
	var i = 0;
	oBtn[0].onclick = function() {
		timer = setInterval(function() {
			oDiv.style.backgroundColor = colors[i];
			i++;
			i = i % colors.length;
		},1000);
	};
	oBtn[1].onclick = function() {
		clearInterval(timer);
	}
}

当我们点击【开始】按钮后，div元素每隔一秒就会切换一次背景颜色。当我们点击【暂停】按钮后，就会停止切换

其实每点击一次，都会新开一个setInterval()，如果你不断点击按钮，setInterval()就会累加起来。也就是说，当你点击3次按钮时，其实已经开了3个setInterval()，此时如果想要停下来，就必须点击3次【暂停】按钮。为了避免产生这个累加的bug，我们在每次点击【开始】按钮时就要清除一次定时器，改进后的代码如下:

window.onload = function() {
	var oBtn = document.getElementsByTagName("input");
	var oDiv = document.getElementsByTagName("div")[0];
	var colors = ["red","blue","orange","yellow","purple","green"];
	// 定义定时器
	var timer = null;
	var i = 0;
	oBtn[0].onclick = function() {
		clearInterval(timer);
		timer = setInterval(function() {
			oDiv.style.backgroundColor = colors[i];
			i++;
			i = i % colors.length;
		},1000);
	};
	oBtn[1].onclick = function() {
		clearInterval(timer);
	}
}

My.ICBM

关注

24
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS逆向】【10.JavaScript 基础语法】BOM - 浏览器对象window，常用属性方法，窗口操作，对话框，定时器，Navigator对象，location对象，（详细讲解）

浏览器对象 window1. window 对象概述2. window 对象的属性window.namewidnow.innerHeight，window.innerWidthwindow.pageXOffset，window.pageYOffsetiframescreen 对象Navigator 对象Navigator.userAgentnavigator.pluginslocation 对象history对象go()back()foreward()history.push
复制链接

扫一扫