浏览器对象模型
浏览器对象模型(Browser Object Model)目前没有统一的标准,但是几乎所有的浏览器实现了javascript的方法属性,所以这些属性也是被认为是浏览器对象的属性或者方法。
我们可以认为:
所有浏览器支持Window对象,所有的javascript的全局对象,属性,方法,函数和DOM都是Window的。类似于java中object和其他的类的关系。
获取浏览器窗口的大小
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于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
实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
一些其他方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Javascript screen
和Windows类似,返回用户的屏幕对象,同时强调是window的属性,即window.screen.availWidth,但是一般window不写出来,常用有:
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Javascript location
同样,window.location 对象是获得浏览器的URL属性,一般也可不写出window。
Location.hostname返回的是web主主机名。
Location.pathname返回的是当前页面的路径的文件名。
Location.port返回的是web主机的端口。
Location.protocol返回的是web主机使用的协议。
Location.href返回当前页面的访问路径(URL)。
Location.assign()用于加载新的文档。
Javascript history
同样,window.history 对象是浏览器历史记录对象,一般也可不写出window。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
window.navigator 对象包含有关访问者浏览器的信息。在此跳过。
Javascript 中的消息框
警告框
alert(“text”)
确认框
Confirm(“text”)
提示框
Prompt(“text”)
Javascript 计时计算
setTimeout()设置未来执行的代码
clearTimeout()停止setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
clearTimeout(t)这个t是上面的这个t
Javascript cookie
Cookie是一个储存一定的临时信息的临时数据容器变量,可以存放相关的临时信息,同时也可以取出。比如浏览器可以记住你的密码,第二次登录时就可以不用输入了。在浏览器中使用非常的广泛。我们用一个示例来说明:
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)//获取cookie函数
{
if (document.cookie.length>0)//判断cookie是否存在
{
c_start=document.cookie.indexOf(c_name + "=")//存在就检测是否为当前需要储存的信息
if (c_start!=-1)//检测存在当前需要的信息
{
c_start=c_start + c_name.length+1 //获取用户名的位置
c_end=document.cookie.indexOf(";",c_start)获取结束位置
if (c_end==-1)//如果没有;字符
c_end=document.cookie.length//设置到结尾
return unescape(document.cookie.substring(c_start,c_end))//返回存在的cookie用户名
}
}
return ""//不存在则返回空
}
function setCookie(c_name,value,expiredays)//不存在cookie则创建
{
var exdate=new Date()//设置日期
exdate.setDate(exdate.getDate()+expiredays)当前日期加上过期天数为过期日期
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())设置cookie形式为cookie名字+cookie值和过期日期
}
function checkCookie()//检测cookie,如果用户存在,显示欢迎界面 ,如果不存在,则提示输入相关的信息。
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
由于我的浏览器存在了cookie,所以我的结果为:
本教程为学习记录,有自己的见解,不足之处希望不吝赐教,参考文献出处为:http://www.w3school.com.cn/js/js_cookies.asp, 转载请注明。
曾经沧海难为水,除去巫山不是云。