JavaScript BOM 随笔谈
浏览器对象模型 BOM,BOM提供了很多对象,用于访问浏览器对象。总结一下常用的属性及方法
1.history 保存用户上网的用户记录
history.go()//跳转到任意位置
history.back() //后退
history.forword()//前进
history.length//历史记录的条数,可用于判断页面是否第一条历史记录
2.screen 基本上只表现客户端的能力 包括浏览器窗口外部的显示信息
常用的属性有 screen.height screen.width。这两个属性被各大浏览器都兼容
document.body.onload=function (){ document.write("屏幕像素高度:"+window.screen.height+"屏幕宽度:"+window.screen.width); }
3. navigator 已经成为识别客户端浏览器的事实标准,navigator的属性常用于检测浏览器
plugins 浏览器中安装插件的信息数组
例如:
/*------------------------------------------------------------------] 以下代码旨在验证window.navigator.plugins 的用法 --------------------------------------------------------------------*/ //Navigator.plugins 属性里包含插件数组,在非IE浏览器中可以这样检测 function hasPlugin(name) { name=name.toLowerCase(); for(var i=0;i<navigator.plugins.length-1;i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){ return true; } } return false; } //在IE浏览器中不能这样检测。只能创建相关浏览器中的ActiveObject对象,如果成功表明安装此插件 function hasIEPlugin(name) { try { new ActiveXObject(name); return true; }catch(ex) { return false; } } //检测flash插件 function hasflash() { var result=hasPlugin("Flash"); if(!result){ result=hasIEPlugin("ShockwaveFlash.ShockwaveFlsh"); } return result; } //在body.onload方法验证 document.body.onload=function (){ if(hasflash()) { document.writeln("浏览器含有Flash插件"); }else{ document.writeln("浏览器没有安装Flash插件"); } }
useAgent 浏览器的用户代理字符串
可用于web 客户端检测,检测浏览器的版本,名称的信息
cookieEnalbed 检测浏览器是否禁用cookiEnabked
等属性
4.location 当前窗口加载文档。以及导航
document.body.onload=function(){ document.write("hash:"+location.hash+"<br/>") //#号后面的参数 document.write("host:"+location.host+"<br/>") //服务器名称+端口号 document.write("hostname:"+location.hostname+"<br/>"); //服务器名称 document.write("port:"+location.port+"<br/>"); //端口号 例如:8080 document.write("protocol:"+location.protocol+"<br/>"); //协议名 例如:http document.write("seach:"+location.seach+"<br/>"); //?后面的参数 }
location.href 加载文档,并产生一条历史记录
location.replace() 加载文档不产生历史记录
location.reload() 从缓存中重新加载文档
location.reload(true) 从服务器中重新加载文档
例如:
document.getElementById("reload").onclick=function(){ window.location.reload(); } document.getElementById("reloadtrue").onclick=function(){ window.location.reload(true); }
5. window 属性
5.1 系统对话框
alert()弹出框,confirm()确认对话框 ,prompt()输入对话框
使用方法如下
document.body.onload=function(){ alert("message"); //确认对话框 有 是 否两个按钮 if(confirm("Are you sure ?")){ //弹出框 只有一个按钮 alert("I am sure !"); }else{ alert("sorry I'm not sure !"); } } document.body.onload=function(){ //输入对话框,可以接受输入内容 var result=prompt("What's your name boy ?","Jiangqiang"); if(result!=null){ alert("hellow,welcome "+result); } }
5.2 时间函数 Timeout Interval
var action=setTimeout(function,Time):
如果在Time时间内没有调用ClearTimeout(action); 将执行一次function
例如:
document.body.onload=function(){ var i=1; var dosome=function (){ i=i+1; alert(i) if(i==2){ //取消调用 clearTimeout(action); } }; //超时调用 var action=setTimeout(dosome,3000) }
var action=setInterval(function,Time)
每隔Time时间就执行一次function,直至调用ClearInterval(function)介绍接受调用
例如:
document.body.onload=function (){ var i=1; var dosome=function (){ i=i+1; alert(i) if(i==10){ //取消调用 clearInterval(action); } }; //开始调用 var action=setInterval(dosome,2000); }
5.3 window.open()
window.open 可以打开一个新窗口,是唯一可以打开一个无状态栏的窗口的方法
window.opener是 新打开窗口中表示原窗口的对象
使用例:
document.body.onload=function(){ var i=1; var newwin=window.open("Default.aspx") //newwin 是原始窗口的指针,可以操作其窗口大小,位置,关闭, //控制其大小 newwin.resizeTo(500,100); //控制其位置 newwin.moveTo(100,100); var doing=function(){ i=i+1; if(i==10){ //唯一自动关闭 newwin.close(); } } setInterval(doing,1000); }
5.4 窗口关系
window.top,window.parent,window.opener,window.self 比较关系
window.opener 是用window.open打开窗体的,父窗体的对象
window.top 是在页面使用框架(frame),Iframe 时表示浏览器最早的窗体(最父的窗体);
window.parent 是在页面使用框架(frame),Iframe 时表示浏览器上一级窗体(上级父窗体);
window.self 是在页面使用框架(frame),Iframe 时 表示自己窗体本身对象。