JS BOM
之前提到过JS和DOM之间的互动方法。而BOM(Browser Object Module)是浏览器的对象模型,它也可以和JS进行互动。也就是说,JS还可以和浏览器进行互动。因为现代主流浏览器都已经实现了JS中和BOM相关的方法,所以JS对BOM也有很高的通用性和兼容性。下面将通过几种每个浏览器都有的,通用的对象来讲述JS和BOM之间的互动方式
■ window对象
window对象抽象的是浏览器的窗口,即用户的视口。DOM中常用的文档的抽象document对象也是window对象的一个属性:window.document
属性:
window.innerHeight 浏览器内部窗口高度
window.innerWidth 浏览器内部窗口宽度
方法:
window.open() 打开窗口
window.close() 关闭窗口
window.moveTo(x,y) 移动窗口到
window.resizeTo(x,y) 改变窗口大小
■ window.screen对象
window.screen对象抽象的是用户的屏幕,在编程的时候可以省略window直接写screen構わない。
属性:
screen.availHeight 用户屏幕高度
screen.availWidth 用户屏幕宽度
*这两个和window的那俩尺寸属性不太一样,比如浏览器窗口没最大化,或者一个页面里面有多个iframe(每个也算一个独立的窗口)时,窗口尺寸会变小,但是屏幕尺寸是不变的。
■ window.location对象
window.location对象抽象的是页面的URL。和screen一样,写的时候可以不要window做前缀
属性:
location.href 当前页面的完整URL
location.hostname web主机的域名
location.pathname 当前页面路径或文件名
location.port 当前连接的端口
location.protocol 当前连接的协议
方法:
location.assign(new_url) 让当前窗口重新加载一个新的页面
■ window.history对象
history对象维护了用户的历史操作信息,和上面的一样可以省去window前缀
方法:
history.back() 相当于浏览器的后退
history.forward() 相当于浏览器的前进
■ window.navigator对象
navigator对象维护的是本次请求中浏览器的信息,也可以去掉window前缀
直接看个实例吧:
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt;
得到的结果是:
Browser CodeName: Mozilla Browser Name: Netscape Browser Version: 5.0 (Windows) Cookies Enabled: true Platform: Win32 User-agent header: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0 User-agent language: undefined
■ 消息框对象
JS调用消息框对象时大多数时候是调用了其构造方法来跳出一个消息框。消息框大概有以下几种:
alert(message) 提示框
confirm(message) 确认框,用户点确定返回true,取消返回false
prompt(message,defaultvalue) 提升输入框,用户输入后点击确认返回输入值,点击取消返回默认值,如果默认值未设置则返回null
■ 计时对象
JS可以调用以下两个方法来设置/取消计时,设置计时相当于是设置让某些动作在固定时间后发生
setTimeout("some_javascript",milisecond) 注意两点,1.计时的单位是毫秒 2.第一个参数不是函数或者其他什么对象,而是字符串。也就是说,必须传字符串进去,然后JS会对这个字符串进行解析然后执行。setTimeout方法会返回一个计时对象。
clearTimeout(timeout_object) 参数是一个计时对象,用来取消这个计时对象定下的计时任务。
来综合看一个示例,这个实例按下start count按钮后每隔一秒增加一个count,无限循环直到按下stop count按钮
<html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById(‘txt‘).value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) } </script> </head> <body> <form> <input type="button" value="Start count!" onClick="timedCount()"> <input type="text" id="txt"> <input type="button" value="Stop count!" onClick="stopCount()"> </form> </body> </html>