转载请注明出处：http://blog.csdn.net/iwanghang
觉得博文有用，请点赞，请评论，请关注，谢谢！~
先来一大段复制粘贴（介绍一下基础知识），然后贴上练习敲的代码（好几段代码，并且有大量中文注释），
这样两步，简简单单，又撸了一篇博文（B ǐ J ì）出来。。。
1、基础知识
来源：http://www.dreamdu.com/javascript/what_is_bom/
来源：http://www.w3school.com.cn/js/js_window.asp
BOM是browser object model的缩写，简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型（Browser Object Model）尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。
与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象document.write("www.lpjyc.com");window.document.write("www.lpjyc.com");
2、练习代码：
总的说，学习JavaScript还是很麻烦的，要学习跨浏览器，不过Android也是这样，要适配不同分辨率和API，毕竟都是UI层东西，这样看来，学习底层开发，不仅高大上而且少了很多麻烦事，不知道哪位不接触UI的大神 给 科普科普，后端开发 或者说 底层开发，到底是什么样的感受？
index1-base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index1-Bom1</title> <script type="text/javascript"> // if (confirm("你是不是傻？")) // alert("看出来了，真是傻！"); // else // alert("哎呦喂，不傻呀？"); // var num = prompt("请输入一个整数"); // alert("都会输入 "+ num + " 了，不简单呀~~"); // 打开两个选项卡 // open("http://www.lpjyc.com"); // open("http://www.baidu.com"); // 打开两个选项卡 - 同上。 _blank 表示 在新窗口显示页面 // open("http://www.lpjyc.com","_blank"); // open("http://www.baidu.com","_blank"); // 打开一个选项卡，先跳转到www.lpjyc.com，马上跳转到www.baidu.com // open("http://www.lpjyc.com","lpjyc"); // open("http://www.baidu.com","lpjyc"); // _parent 表示 在当前窗口显示页面 // open("http://www.lpjyc.com","_parent"); // open("haha.html"); // var obj = open("haha.html"); // alert(obj); // 弹出信息：[object Window] // alert(typeof obj); // 弹出信息：object // obj.alert("我是新窗口"); // 第三个参数，用来设置新窗口的属性 // open("haha.html",'','width=300,height=300,left=100,top=100,menubar=no,toolbar=no'); // ---------- 获取浏览器位置 ↓ ---------- // IE、谷歌 浏览器支持：screenLeft，screenTop // alert(screenLeft); // alert(screenTop); // 火狐、谷歌 浏览器支持：screenX、screenY // alert(screenX); // alert(screenY); // 跨浏览器兼容写法：(IE、谷歌、火狐 都支持的写法) // var x = typeof screenLeft == 'number' ? screenLeft : screenX // var y = typeof screenTop == 'number' ? screenTop : screenY // alert(x + ", " + y); // ---------- 获取浏览器位置 ↑ ---------- // ---------- 获取浏览器大小 ↓ ---------- // alert(innerWidth); // 内部页面-宽 // alert(innerHeight); // 内部页面-高 // alert(outerWidth); // 浏览器-宽 // alert(outerHeight); // 浏览器-高 // IE // document.documentElement.clientWidth; // document.documentElement.clientHeight; // IE6 // document.body.clientWidth; // document.body.clientHeight; // 跨浏览器兼容写法： // var width = window.innerWidth; // var height = window.innerHeight; // if(typeof width!='number'){ // if (document.compatMode=='CCS1Compat') { // width = document.documentElement.clientWidth; // height = document.documentElement.clientHeight; // }else{ // width = document.body.clientWidth; // height = document.body.clientHeight; // } // } // alert(width + ", " + height); // ---------- 获取浏览器大小 ↑ ---------- // 超时调用：在指定的时间过后执行代码，执行一次 // 1. // setTimeout("alert('hello')",1000); // 2. // setTimeout(show,1000); // function show(){ // alert("hello"); // } // 3. // setTimeout(function(){ // alert("hello"); // },1000); // 间隔调用：每间隔指定的时间过执行代码，重复执行 // var a = setInterval(function(){ // alert("hello"); // },1000); // clearInterval(a); // 清除间隔调用 // 弹出4次hello // var i = 0; // var a = setInterval(function(){ // i++; // if (i>3) { // clearInterval(a); // 清除间隔调用 // }; // alert("hello"); // },1000); // 定时器 - setInterval // var num = 0; // var b = setInterval(function(){ // num++; // if (num==5) { // alert("5秒"); // clearInterval(b); // 清除间隔调用 // }; // },1000) // 定时器 - setTimeout var number = 0; setTimeout(funA,1000); function funA(){ number++; if (number==5) { alert("5秒"); }else{ setTimeout(funA,1000); } } </script></head><body></body></html>
index2-location.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index2-location</title> <script type="text/javascript"> // location 地址操作命令 // alert(location); // alert(document.location); // alert(location.protocol); // 协议 // alert(location.hostname); // 主机名 // alert(location.port); // 端口号 // alert(location.pathname); // 路径 // alert(location.hash); // 锚点 // file:///F:/H5Demo/Bom/index2.html?name=lilei&age=106&sex=x // 原地址加上?name=lilei&age=106&sex=x进行访问 // alert(location.search); // 打印结果：?name=lilei&age=106&sex=x // // 截取?后边的字符串 // function getSearch(){ // var args = []; // var str = location.search.length>0?location.search.substring(1):''; // alert(str); // var arrs = str.split('&'); // var item = null, m = null, n = null; // for(var i=0;i<arrs.length;i++){ // alert(arrs[i]); // item = arrs[i].split('='); // m = item[0]; // n = item[1]; // args[m] = n; // } // return args; // } // var arr = getSearch(); // alert(arr['name']); // alert(arr['age']); // alert(arr['sex']); // 改变地址栏中的地址 function changeUrl(){ // location.href = 'haha.html'; // location.assign('haha.html'); // location.replace('haha.html'); // 不能后退 // location.reload(); // 重新加载当前页面（可能从缓存中加载） location.reload(true); // 重新加载当前页面（一定是从服务器重新加载） } </script></head><body> <a href="javascript:changeUrl()">点击</a></body></html>
index3-history.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index3-history</title> <script type="text/javascript"> // 前进 function forwards(){ // history.forward(); history.go(1); } </script></head><body> <a href="hihi.html">点击</a> <a href="javascript:forwards()">前进</a></body></html>
hihi.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hihi</title> <script type="text/javascript"> function goBack(){ // window.history.back() window.history.go(-1) } </script></head><body> hihi~~ <a href="javascript:goBack()">后退</a> <!-- <input type="button" value="返回" onclick="goBack()"> --></body></html>
var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Internet Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ]};BrowserDetect.init();
index4-navigator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index4-navigator</title> <script type="text/javascript" src="BrowserDetect.js"></script> <script type="text/javascript"> // 1.获取浏览器信息 // alert(navigator.appName); // Netscape // alert(navigator.userAgent); // Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 // alert(navigator.platform); // Win32 // 2.浏览器嗅探器 - BrowserDetect.js alert(BrowserDetect.browser); // Chrome alert(BrowserDetect.varsion); // undefined alert(BrowserDetect.OS); // Windows // 判断是否是IE6 if(BrowserDetect.browser=='Internet Explorer' && BrowserDetect.varsion<7){ alert("IE6需要处理兼容问题"); </script></head><body></body></html>
index5-navigator-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index5-navigator-2</title> <script type="text/javascript"> // 1.插件，通过下载安装完成。比如，在线音乐、视频动画等等。 // navigator对象的plugins属性，存储了浏览器已安装插件的完整列表。 // alert(navigator.appName); // Netscape // alert(navigator.plugins); // alert(navigator.plugins.length); // for (var i = 0; i < navigator.plugins.length; i++) { // document.write("插件名称：" + navigator.plugins[i].name + "<br>"); // document.write("插件描述：" + navigator.plugins[i].description + "<br>"); // } // 不是所有的IE浏览器都支持该属性 // 检测非IE浏览器，是否含有某个插件 function hasPlugin(name){ var name = name.toLowerCase(); // 转成小写 for (var i = 0; i < navigator.plugins.length; i++) { if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) { return true; } } return false; } // alert(hasPlugin('Flash')); // 比如，判断是否有Flash插件 // 2.验证是否含有某个ActiveX控件 function hasIEPlugin(){ try{ // 可能发生异常的代码 // new ActiveXObject('ShockwaveFalsh.ShockwaveFalsh'); new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); // 比如，判断是否有Flash插件 return true; }catch(e){ return false; } } // alert(hasIEPlugin()); // 3.跨浏览器兼容写法（判断是否有Flash插件）： function hasPlugins(){ var boo = hasPlugin("Flash"); // 如果返回true说明 当前非IE浏览器，或者IE11 if (!boo) { boo = hasIEPlugin(); } return boo; } alert(hasPlugins()); </script></head><body></body></html>
转载请注明出处：http://blog.csdn.net/iwanghang
欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式
微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com
沈阳或周边城市公司有意开发Android，请与我联系
联系方式
微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com
觉得博文有用，请点赞，请评论，请关注，谢谢！~