JS 客户端浏览器操作、BOM、渗透客户端浏览器（windows对象：screen屏幕操作、location浏览器域名、history浏览器历史、Navigator浏览器信息、cookie）

windows对象

windows尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

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

其他windows方法

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

window.screen对象在编写时可以不使用 window 这个前缀。

creen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><script>
document.write("可用宽度: " + screen.availWidth);
</script></body>
</html>

window.location 对象在编写时可不使用 window 这个前缀

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

返回（当前页面的）整个 URL：

document.write(location.href);

返回当前 URL 的路径名：

document.write(location.pathname);

location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
<script>
function newDoc(){window.location.assign("https://www.xiba.com")
}
</script>
</head>
<body><input type="button" value="加载新文档" onclick="newDoc()"></body>
</html>

location.replace(url) ：

通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

window.history对象

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制

history.back() - 与在浏览器点击后退按钮相同

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack()
{window.history.back()
}
</script>
</head>
<body><input type="button" value="Back" onclick="goBack()"></body>
</html>

history.forward() - 与在浏览器中点击向前按钮相同

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function goForward()
{window.history.forward()
}
</script>
</head>
<body><input type="button" value="Forward" onclick="goForward()"></body>
</html>

history.go() 这个方法来实现向前，后退，刷新的功能。

function a(){history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}
function b(){history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}
function a(){history.go(0);  // go() 里面的参数为0,表示刷新页面
}

Navigator对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><div id="example"></div>
<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.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script></body>
</html>

Cookie

读取cookie

var x = document.cookie;
console.log(x)
// document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

修改cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
// 旧的cookie将被覆盖

删除cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哎西吧</title>
</head>
<head>
<script>
//以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。
//该函数设置了 cookie 名、cookie 值、cookie过期时间。
function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;
}
//cookie 名的参数为 cname。
//创建一个文本变量用于检索指定 cookie :cname + "="。
//使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。
//循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
//如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
//如果没有找到 cookie, 返回 ""。
function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";
}
//最后，我们可以创建一个检测 cookie 是否创建的函数。
//如果设置了 cookie，将显示一个问候信息。
//如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user!="" && user!=null){setCookie("username",user,30);}}
}
</script>
</head><body onload="checkCookie()"></body></html>

JS 客户端浏览器操作、BOM、渗透客户端浏览器（windows对象：screen屏幕操作、location浏览器域名、history浏览器历史、Navigator浏览器信息、cookie）相关推荐

浏览器对象模型BOM
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器的JavaScript扩展都纳入BOM的范畴.BOM提供了一组独立于网页内容而 ...
使用c++进行Windows编程中各种操作文件的方法【转】
https://www.zhaokeli.com/article/8232.html 使用c++进行Windows编程中各种操作文件的方法 [转] 来源:赵克立博客分类: C/C++ 标签:--发布 ...
js笔记（四）内置对象Math和Date()、浏览器对象模型BOM
大标题小标题备注一.内置对象Math.Date() 1. Math 数学对象; 2. Date() 日期对象; 常用的数学对象:Math.PI.abs(n).round(n).random(). ...
windows下火狐浏览器中配置kerberos客户端
1.环境 1.操作系统:windows 2. CDH版本信息: 5.16.2-1.cdh5.16.2.p0.8 3.浏览器:火狐浏览器 4.kdc客户端:kfw-4.1-amd64 2.安装火狐浏览器 ...
前端之浏览器对象模型(BOM)
1.BOM 概念: BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
Node.js联机游戏——gobang五子棋（客户端+服务端+websocket的双人游戏）
Node.js联机游戏--gobang五子棋(客户端+服务端+websocket的双人游戏) 五子棋的基本结构 ~·基本画图 ~·判断机制 ~···横向/竖向判断 ~···斜向判断搭建服务器阶段 ~ ...
JavaScript浏览器对象模型BOM
JavaScript浏览器对象模型BOM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
浏览器对象模型BOM学习
BOM 浏览器对象模型 BM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象,用来完成对浏宽器的操作 B0M对象 Window 代表的是整个浏览器的窗口,同时window也是网页中的全局 ...