<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器对象</title>
</head>
<body>
<div id="app">
</div>
<!-- window对象不但充当全局作用域,而且表示浏览器宽高 -->
<script type="text/javascript">
// innerWidth 和 innerHeight 属性,可以获取浏览器窗口的内部宽度和高度;去除,菜单 边框 工具等占位元素后,用于显示网页的纯净高度
console.log(window.innerWidth+" "+window.innerHeight);// 1536 723
console.log(window.outerWidth+" "+window.outerHeight);// 1536 824 可以获取浏览器整个窗口的高度和宽度
// navigator对象,表示浏览器信息,最常用的属性;(但是navigator的信息可以很容易的被用户修改,所以读取的值不一定是正确的)
// navigator.appName : 浏览器名称
// navigator.appVersion: 浏览器版本
// navigator.lanuage: 浏览器设置的语言
// navigator.platform : 操作系统类型
// navigator.userAgent: 浏览器设定的user-Agent字符串
console.log("appName:"+navigator.appName);
console.log("appVersion:"+navigator.appVersion);
console.log("lanuage:"+navigator.language);
console.log("paltform:"+navigator.platform);
console.log("user-Agent:"+navigator.userAgent);
// 正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算
// screen表示屏幕的信息,常用的如下
// screen.width 屏幕宽度,以像素为单位
// screen.height 屏幕高度,以像素为单位
// screen.colorDepth: 返回颜色位数
console.log("screen size "+screen.width+" "+screen.height);// 1536 864
// location对象表示当前页面的url信息,例如一个完整的url(可以使用location.href获取,)
// https://baike.baidu.com/item/%E7%BD%91%E6%99%AF/70176?fr=aladdin
console.log(location.href);//http://127.0.0.1:8848/HBuilderProjects/WebStudy/js/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1.html
// 想要获取URL 各部分的值,可以这么写
console.log(location.protocol);//http:
console.log(location.host);//127.0.0.1:8848
console.log(location.port);//8848
console.log(location.pathname);///HBuilderProjects/WebStudy/js/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1.html
// console.log(location.search);
// console.log(location.hash);
// PS 要加载一个新页面,可以调用location.assign("..."); 要重新加载当前页面,调用location.reload()方法
// if(confirm('重新加载当前页面'+location.href+"?")){
// location.reload();
// }else{
// // location.assign("http://www.baidu.com");
// }
// document对象;表示当前页面
// document的title属性,是从HTML文档中的,<title>xxxx</title>读取的,但是可以动态改变
document.title = "我是document修改标题";
var app = document.getElementById("app");
app.innerHTML = "测试插入文档内容";
// document对象还有一个属性cookie,可以获取当前页面的cookie
// cookie是由服务器发送的key-value标识符,因为HTTP协议是无状态的,但是服务器要区分到底是哪一个用户发来的请求;就可以用Cookie来区分;
// 当一个用户成功登陆后,服务器发送一个cookie给浏览器,例如user=ABC123xyz(加密字符串),之后浏览器访问该网站时,会在请求头上附上这个cookie
// 服务器根据cookie即可区分出用户,Cookie还可以存储网站的一些设置,例如页面显示的语言等;
// javaScript可以通过document.cookie读取到当前页面的cookie:
// document.cookie;
console.log(document.cookie);
// 由于js中能读取到cookie,而用户的登陆信息通常也在cookie中,这就造成了巨大的安全隐患,这是因为在html页面中引入的第三方js代码是允许的;
// 为了解决这个问题,服务器在设置cookie的时候,可以使用httpOnly,设置了httpOnly的cookie将不能被js读取,为了安全服务器在设置cookie的时候,
// 应该坚持使用httpOnly
// history: 对象保存了浏览器的历史记录,js可以调用history对象的back或forward,相当于用户点击了浏览器的后退或前进的按钮
// 现代浏览器大量使用ajax和页面交互,简单粗暴的调用history.back可能会让用户感到愤怒;
// 任何情况下,都不应该使用history对象;
</script>
</body>
</html>
网友评论