JavaScript的BOM（浏览器对象）基础语法总结

1、window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

2、history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

//语法
window.history.[属性|方法]
//注意：window可以省略。

//History 对象属性
//History 对象方法

1)length(属性）:返回浏览器历史列表中的URL数量。

//例子：
<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>
//使用length属性，当前窗口的浏览历史总长度

2）back()方法，加载 history 列表中的前一个 URL。

//语法
window.history.back();
//注意：等同于点击浏览器的倒退按钮。

//back()也相当于go(-1),代码如下:
window.history.go(-1);

3）forward()方法，加载 history 列表中的下一个 URL。

//语法
window.history.forward();
//注意：等价点击前进按钮。

//forward()相当于go(1),代码如下:
window.history.go(1);

4)go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

//语法
window.history.go(number);

//number参数：
//例子1
window.history.go(-2);
//浏览器中，返回当前页面之前浏览过的第二个历史页面

//例子2
window.history.go(3);
//返回当前页面之后浏览过的第三个历史页面

3、location用于获取或设置窗体的URL，并且可以用于解析URL。

//语法
location.[属性|方法]

//location对象属性图示:
//location 对象属性：
//location 对象方法:


//例子
<script type="text/javascript">
  document.write(window.location.href); 
</script>

//获取当前显示文档的URL,并输出

4、Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

JavaScript的BOM（浏览器对象）基础语法总结

//例子
<script type="text/javascript">
   var browser=navigator.appName;//名称
   var b_version=navigator.appVersion;//版本
   document.write("浏览器名称"+browser);
   document.write("浏览器版本"+b_version);
</script>
//查看浏览器的名称和版本

1）、userAgent返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

//语法
navigator.userAgent

//例子
function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
  //使用indexOf返回字符，若没有存在变返回-1，所以但返回的值比-1大的时候，证明Firefox存在
    B_name="Firefox"; 
}else if(u_agent.indexOf("Chrome")>-1){
 B_name="Chrome"; 
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
 B_name="IE(8-10)"; 
} 
document.write("B_name:"+B_name+"<br>"); 
document.write("u_agent:"+u_agent+"<br>"); } 
//使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),

//运行结果如下图：

5、screen对象用于获取用户的屏幕信息。

//语法
window.screen.属性

//属性：

注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。

1）屏幕分辨率的高度与宽度： screen.height 返回屏幕分辨率的高；screen.width 返回屏幕分辨率的宽。

<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

2）可使用的高度与宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏; screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

JavaScript的BOM（浏览器对象）基础语法总结

相关推荐