BOM (browser object model) 写js时浏览器提供的信息以及其他操作窗口的方法总结笔记（-待续）

window操作

1.  打开一个新窗口 知识来源: Window open() 方法 | 菜鸟教程

<script>
	//打开一个新窗口 写入内容 3s后关闭
	var myWindow=window.open('','_blank','left=200,top=200,width=500,height=300',true);
	myWindow.document.write("<p>文本内容</p>");
	myWindow.focus();
	setTimeout(()=>{myWindow.close()},3000);
</script>

2.  用于识别pc端与移动端

<script>
	//识别 pc端 移动端
	function browserConfirm() {
		let str = window.navigator.userAgent;
		if (str.match(/android/i) || str.match(/phone/i) || str.match(/ipad/i) //添加移动端字符条件
						&& !(str.match(/nt/i) || str.match(/net/i)) //添加pc端字符条件
		){
			console.log('移动端');
		} else {
			console.log('PC端');
		}
	}
	browserConfirm();
</script>

3. 浏览器信息 代号 名称 版本 启用Cookies？ 硬件平台 用户代理 代理语言

<script>
	// 前面的 windown 可省略
	console.log(window.navigator.userAgent);//浏览器信息
	console.log(navigator.appCodeName); //浏览器代号
	console.log(navigator.appName); //浏览器名称
	console.log(navigator.appVersion); //浏览器版本
	console.log(navigator.cookieEnabled); //启用Cookies
	console.log(navigator.platform); //硬件平台
	console.log(navigator.userAgent); //用户代理
	console.log(navigator.language);//用户代理语言
</script>

4. 可视区的宽度高度 clientWidth，滚动条宽高 scrollHeight，屏幕信息 screen.availWidth 颜色分辨率 screen.pixelDepth，主机信息 location.hostname 等

<script>
	console.log('屏幕宽高-----------');
	console.log(window.innerWidth); //浏览器窗口的内部宽(包括滚动条宽)
	console.log(window.innerHeight); //浏览器窗口的内部高度(包括滚动条高)
	console.log(document.body.scrollHeight); //chrome 滚动条总高度(包括水平滚动条高)
	console.log('以下支持低版本-----------');
	console.log(document.documentElement.clientWidth);//可视区宽度(不包括滚动条宽)
	console.log(document.documentElement.clientHeight);//可视区高度(不括滚动条宽)
	console.log(document.documentElement.scrollTop); //可视区上边距
	console.log(document.documentElement.scrollHeight); //滚动条总高度(包括滚动条高)

	console.log('屏幕信息-----------');
	console.log(window.screen.availWidth); //可用电脑的屏幕宽度
	console.log(window.screen.availHeight); //可用电脑的屏幕高度
	console.log(window.screen.width);	//返回电脑屏幕的总宽度
	console.log(window.screen.height);	//返回电脑屏幕的总高度
	console.log(window.screen.colorDepth);	//返回目标设备或缓冲器上的调色板的比特深度
	console.log(window.screen.pixelDepth);	//返回屏幕的颜色分辨率（每象素的位数）

	console.log('本地主机信息-----------');
	console.log(window.location.hostname); //返回web 主机的域名
	console.log(window.location.pathname); //返回当前页面的路径和文件名
	console.log(window.location.port); //返回web 主机的端口
	console.log(window.location.protocol); //协议（http: 或 https:）
	console.log(window.location.href); //href
</script>

5. 窗口滚动条 窗口大小 菜单事件 页面加载 页面前进 页面后腿 页面刷新

<script>
	// window 相关事件
	window.onscroll = function (){
		console.log('滚动条被滚动');
	}

	window.onresize = function (){
		console.log('窗口大小被改变');
	}

	document.oncontextmenu=function() {
		console.log('鼠标右键已单击');
		return false;//浏览器右键菜单事件的默认行为
	}
	
	//页面操作
	window.location.assign(""); //方法加载新的文档
	history.back() //与在浏览器点击后退按钮相同
	history.forward() //与在浏览器中点击向前按钮相同
	history.go(1);  //前进页面
	history.go(0);  //刷新页面
	history.go(-1);  //后腿页面
</script>

6. 系统对话框 alert(); confirm(); prompt();

<script>
	//系统对话框
	alert('abc');
	var bloom1 = confirm('是否确定？');//返回bloom类型
	var str = prompt('请输入你的姓名','默认值');//返回string
</script>

待续 。。。