JavaScript之浏览器BOM对象

最新推荐文章于 2023-07-11 15:02:05 发布

技术引领者

最新推荐文章于 2023-07-11 15:02:05 发布

阅读量280

点赞数

分类专栏： JavaScript bom 文章标签：浏览器 cookie BOM

本文链接：https://blog.csdn.net/qq_37022150/article/details/83587128

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

bom

1 篇文章 0 订阅

订阅专栏

第一步: 获取浏览器窗口的宽度与高度

涉及到不同浏览器，所以我们有以下的方法，可以适用不同的浏览器
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

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

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实例:
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

Window 的其他方法
window.opne();
window.close();
window.moveto();
window.resizeTo();

第二步: 获取屏幕可用的宽度与高度

window.screen.availWidth[或者 screen.availWidth]
window.screen.availHeight[或者screen.availHeight]

第三步: 获取当前Location 当前位置

同第二步一样，前面也不可加 window
location.href 获取当前页面的url
location.protocol 获取当前的协议
location.hostname 获取主机名
location.port 获取当前端口
location.pathname 获取路径名
location.assign 打开新窗口
实例[通过类名获取到所有的集合，然后给其第一个赋值]
<!DOCTYPE html>
<p class = "p2" />
var pc = document.getElementsByClassName("p2");
pc[0].innerHTML = location.href;

第四步: 获取浏览历史

history.back返回上一级
history.forward 进行到下一级

第五步: 浏览器的信息

navigator.appName 浏览器名称
navigator.appCodeName 浏览器代号
navigator.cookieEnabled Cookie是否可用
navigator.platform 平台
navigator.userAgent 用户代理
navigator.systemLanguage 用户代理语言

第六步: 警示框，确认框，提示框

alert() 警示框
confirm() 确认框
prompt() 提示框
实例
	<script>
	function mf () 
	{
		// 通用警示框测试
		 alert("不要走，客观");
		
		// 确认框测试
		var message;
		var result = confirm ("请确认信息");
		if (result == true) {
			message = "你按下了确认[按钮]";
		} else {
			message = "你按下了取消[按钮]";
		}
		document.getElementById("p1").innerHTML = message;
		
					
		// 提示框测试
		var message;
		var name = prompt("请输入你的名字", "Jack");
		if (name != null && name !="") {
			message = "欢迎" + name + "的到来";
		}
		document.getElementById("p1").innerHTML = message;
	}
</script>

第七步: 浏览器计时事件

setInterval(第一个参数是函数，第二参数是时间)
考虑用户体验，我们直接展示一个页面时钟
实例1：在界面上显示一个时钟开始
	var dd = setInterval(function(){mf()},1000);
function mf () 
{
	var d = new Date();
	var t = d.toLocaleTimeString();
	document.getElementById("p1").innerHTML = t;

}
实例2:在界面上显示一个页面时钟，并且进行停止
在实例1的基础上
function celarIntervalDemo ()
{
	clearInterval(dd);
}
setTimeOut
	多长时间开始执行
clearTimeOut
	停止
用法类似与setInterval 与clearInterval

第八步: Cookie

set/get/check
check充分融合了set与get方法
代码展示

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;
}
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 "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
	alert("欢迎 " + user + " 再次访问");
}
else {
	user = prompt("请输入你的名字:","");
	if (user!="" && user!=null){
		setCookie("username",user,30);
	}
}
}