javascript window - 浏览器对象模型
浏览器对象模型 (bom) 使 javascript 有能力与浏览器“对话”。
window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html dom 的 document 也是 window 对象的属性之一:
window.document.getelementbyid(header);
与此相同:
document.getelementbyid(header);
window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于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 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveto() - 移动当前窗口
window.resizeto() - 调整当前窗口的尺寸
window screen
window.screen 对象包含有关用户屏幕的信息。
一些属性:
screen.availwidth - 可用的屏幕宽度(属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。)
screen.availheight - 可用的屏幕高度(属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。)
window location
window.location 对象用于获得当前页面的地址 (url),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 url。
location.assign() 方法加载新的文档。
实例:
<script>
document.write(location.href);
</script>
以上代码输出为:
http://www.w3school.com.cn/js/js_window_location.asp
location.assign 与 location.replace的区别
window.location.assign(url) : 加载 url 指定的新的 html 文档。 就相当于一个链接,跳转到指定的url,
当前页面会转为新页面内容,可以点击后退返回上一个页面。
window.location.replace(url) : 通过加载 url 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,
前后两个页面共用一个窗口,所以是没有后退返回上一页的。
window history
history.back() - 与在浏览器点击后退按钮相同(加载历史列表中的前一个 url。)
history.forward() - 与在浏览器中点击按钮向前相同(加载历史列表中的下一个 url。)
window navigator
window.navigator 对象包含有关访问者浏览器的信息。
javascript 消息框
在 javascript 中创建三种消息框:警告框、确认框、提示框。
警告框
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert(文本)
确认框
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm(文本)
实例:
<script type="text/javascript">
function show_confirm()
{
var r=confirm(press a button!);
if (r==true)
{
alert(you pressed ok!);
}
else
{
alert(you pressed cancel!);
}
}
</script>
提示框
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt(文本,默认值)
实例:
<script type="text/javascript">
function disp_prompt()
{
var name=prompt(请输入您的名字,bill gates)
if (name!=null && name!=)
{
document.write(你好! + name + 今天过得怎么样?)
}
}
</script>
javascript 计时
通过使用 javascript,我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行。我们称之为计时事件。
settimeout()
语法
var t=settimeout(javascript语句,毫秒)
第一个参数是含有 javascript 语句的字符串。这个语句可能诸如 alert('5 seconds!'),或者对函数的调用
实例: (无穷循环)
<script type="text/javascript">
var c=0
var t
function timedcount()
{
document.getelementbyid('txt').value=c
c=c+1
t=settimeout(timedcount(),1000)
}
</script>
cleartimeout()
语法
cleartimeout(settimeout_variable) //settimeout_variable就是创建时的定时器引用(变量)
实例:
function stopcount()
{
cleartimeout(t)
}
</script>
javascript cookies
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。
你可以使用 javascript 来创建和取回 cookie 的值。
cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。
document.cookie = name=value;expires=date;path=path
document.cookie = username=darren;path=/;domain=qq.com
创建和存储 cookie
function setcookie(c_name,value,expiredays)
{
var exdate=new date()
exdate.setdate(exdate.getdate()+expiredays)
document.cookie=c_name+ = +escape(value)+
((expiredays==null) ? : ;expires=+exdate.togmtstring())
}
读取cookies
function getcookie(c_name)
{
if (document.cookie.length>0) //检查 document.cookie 对象中是否存有 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))
}
}
return
}
设置cookie的有效期
在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。
document.cookie = name=value;expires=date