BOM部分基础知识总结与实例(V客学院知识分享)
第一：什么是BOM
1、BOM（Browser Object Document）即浏览器对象模型。
2、BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
3、由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
4、BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
5、BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
第二：主要的BOM对象实例讲解
1、Window 对象
属性 status
方法 close() open()
事件 onload
实例一：
<script language="javascript">
str="我们今天始学习BOM对象模型,我们今天始学习BOM对象模型";
i=0;
function status_text(){
if(str.length-10<i){i=0;
}
window.status=str.substr(i++,10);
setTimeout("status_text()",500);
}
window.onload=function(){
status_text();
}
</script>
实例二:
<script language="javascript">
str="我们今天始学习BOM对象模型";
i=0;
function status_text(){
if(str.length<i){i=0;}
window.status=str.substr(0,++i);
setTimeout("status_text()",500);
}
window.onload=function(){
status_text();
}</script>
实例三：
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,
resizable=no,location=no, status=no')
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
２、Window Screen对象
常用属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
实例四：
<script language="javascript">
document.getElementById("open").onclick=function(){
h=(screen.availHeight-400)/2;
w=(screen.availWidth-400)/2;
window.open ('http://www.baidu.com','newwindow','height=400,width=400,top='+h+',left='+w
+',toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
</script>
３、Window Location对象
常用属性
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
实例五：
<script language="javascript">
document.getElementById("open").onclick=function(){
window.location='http://www.baidu.com';
}
</script>
4、Window History
常用方法
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
实例六
<html>
<head>
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
总结：ＢＯＭ要加常实际应用，通过基本语法来加强对bom的理解BOM主要包括
Window , Screen,Location,History,Navigator几个主要部分，一个对象主要包括事件，方法属性。
（PHP开发、web前端、UI设计、VR开发专业培训机构-v客IT学院版权所有，转载请注明出处，谢谢合作！）