JS BOM基础篇

BOM基础

• BOM: Borwser Object Model JS的浏览器对象模型, 主要用于客户端浏览器的管理

• BOM概念比较古老, 但是一直没有被标准化, 不过现在基本上主流浏览器都支持BOM, 也都遵循最基本的规则, W3C也将BOM的主要内容纳入了HTML5的规范

• BOM 是由一系列的对象组成的, 每个对象负责一类事务

  而BOM里的核心对象 是 window对象; 该对象既是核心对象也是顶层对象, 其余的对象都是由window延伸出来的

• 由window延伸出来的对象:

  1. document
  2. history
  3. location
  4. navigator
  5. screen
  6. frames

• window对象

  BOM里的核心对象, window对象表示的就是当前浏览器窗口

  window对象的特点：

  所有的全局变量或者方法, 不管是系统的还是自定义的, 都是window的属性. 只不过, window在书写的时候都是可以省略的

  1. 系统的对话框

     window定义了3个人机交互的方法, 主要用于JS的调试, 也可以用于交互

     /*
     * 	1. alert() 确定提示框
     * 	2. confirm() 选择提示框  该方法是有返回值的, 布尔值, 确定:true, 取消:false
     * 	3. prompt() 输入提示框  方法是有返回值的, 为输入框的值, 确定:输入框的值, 取消: null
     * 
     * 后两个方法是有返回值的, 布尔值
     */
     

  2. 打开和关闭窗口

     /*
     * 	1. 打开一个新窗口   open(URL, name, features)
     * 		URL: 打开的窗口的地址
     * 		name: 可选, 声明的窗口的名称, 该值可以通过结合a标签实现跨窗口跳转
     * 		features: 新窗口的特性, 如: 大小, 位置
     *  返回值: 创建好的浏览器窗口对应的window对象 
     * 
     * 	2. 关闭窗口  close()
     */
     <a href="http://www.mi.com" target="abc">点击跳转到小米官网</a>
     <script type="text/javascript">
     var newW = window.open("购物车练习.html", "abc", "top=100, left=200");
     window.document.write("<h1>这是DOM基础html页面</h1>");
     newW.document.write("<h1>这是newW页面</h1>")
     
     setTimeout(function(){
         newW.close();
         window.close();
     }, 5000);
     </script>
     

  3. 延时器

     • 计时器: setInterval() clearInterval()

       每隔一段时间触发一个函数, 只要不清除或者不关闭页面, 计时器一直执行

     • 延时器: setTimeOut() clearTimeOut()

       在指定的时间间隔过后触发函数, 该方法只触发一次, 其余用法与计时器相同

     setTimeout(function(){
         console.log("hello!");
     }, 2000);
     

  4. 移动窗口

     • moveTo(x, y);

       将窗口移动到x, y的位置, 不允许窗口超出屏幕

     • moveBy(x+, y+);

       将窗口在当前的位置基础上 移动x, y的增量, 增量可以为负值

     var newW;
     function createNewWin() {
         newW = window.open("购物车练习.html", "abc", "width=300, height=300, top=300, left=300");
         newW.document.body.style.width = "2000px";
         newW.document.body.style.height = "2000px";
     }
     			
     function moveToWin() {
         newW.moveTo(500, 1000);
     }
     			
     function moveByWin() {
         newW.moveBy(-10, -10);
     }
     

  5. 重置窗口大小

     • resizeTo(w, h);

       将窗口的大小重置成w和h的大小, 不允许大小超出屏幕大小

     • resizeBy(w+, h+);

       将窗口的大小在当前大小的基础上增加w和h的大小, 不允许大小超出屏幕大小, 增量可以为负值

     function resizeToWin() {
         newW.resizeTo(5000, 2000);
     }
     			
     function resizeByWin() {
         newW.resizeBy(-5, 5);
     }
     

  6. 重置滚动位置

     • scrollTo(x, y)
     • scrollBy(x+, y+)

     function scrollToWin() {
         newW.scrollTo(700, 800);
     }
     			
     function scrollByWin() {
         newW.scrollBy(10, -10);
     }
     			
     

• "跨域"问题(JS存在的问题)

  JS里存在 “同源策略”, 只允许同源下的文件相互通信, 非同源下的文件不允许相互通信. 如果非要通信, 浏览器阻止, 进而报错.

• history对象

  该对象存储了浏览器的浏览历史(页面访问的一个顺序, 即仅存储最近访问的, 有限条目的url信息),H5之前, 为了保护用户的个人信息和隐私, history是禁止通过js直接操作的.

  1. history对象常用的方法

     1. back()  在历史记录中后退   等效于 浏览器工具栏单击"后退"按钮
     2. forward() 在历史记录中前进  等效于 浏览器工具栏单击"前进"按钮
      
     * 注意: 返回上一页时, 页面通常是从浏览器的缓存中加载, 而不是重新要求服务器发送新的网页
     
     3. go() 会从当前的历史记录中加载页面, 按照传入的页面索引值 (当前页面的索引是0, 上一页-1, 下一页1, 依次类推)
     4. pushState()
     5. popstate事件
     6. replaceState()
     // console.log(history);
     

• navigator对象

  该对象存储了与浏览器相关的基本信息, 如名称, 版本, 系统等

  // console.log("浏览器名:" + navigator.appName);
  // console.log("浏览器版本:" + navigator.appVersion);
  // console.log("是否开启cookie:" + navigator.cookieEnabled);
  // console.log("浏览器的总信息:" + navigator.userAgent);
  

  例1：

  //浏览器嗅探
  var info = navigator.userAgent.toLowerCase();
  if(info.indexOf("firefox") != -1) {
      alert("火狐浏览器");
  } else if(info.indexOf("opr") != -1) {
      alert("欧鹏浏览器");
  } else if(info.indexOf("chrome") != -1) {
      alert("谷歌浏览器");
  } else if(info.indexOf("safari") != -1) {
      alert("safari浏览器");
  } else {
      alert("IE浏览器");
  }
  

  例2：

  /*
  * 检测操作系统
  * windows macOS unix linux
  * 	"Win"  "Mac" "X11" "Linux"
  */
  var osArr = ["Win", "Mac", "X11", "Linux"];
  for(var i = 0; i < osArr.length; i++) {
      osArr[i] = osArr[i] === "X11" ? "Unix" : osArr[i];
      // 给navigtor对象添加
      navigator["is" + osArr[i]] = (function(osName) {
          return function() {
              return navigator.userAgent.indexOf(osName) != -1;
          }
      })(osArr[i]);
  }
  console.log(navigator.isWin());
  console.log(navigator.isMac());
  console.log(navigator.isUnix());
  console.log(navigator.isLinux());
  
  

• location对象

  该对象里存储了当前文档位置(url)相关的信息

  URL: 全球资源定位器 简单的说就是网页的地址字符串

  location对象定义了8个属性, 其中7个属性可以获取当前url地址的部分信息, 另一个属性包含url地址的完整信息

  /*
  * href: 显示当前文档完整的url地址, 该属性可写, 通过设置该属性可以直接改变地址栏的url地址, 会使浏览器直接读取最新的地址并跳转
  * protocol: 协议名部分
  * host: 获取当前地址的主机名和端口号部分
  * hostname:获取当前地址的主机名部分
  * port:获取当前地址的端口号部分
  * pathname: 获取当前地址的路径部分
  * search: 获取当前地址的参数(查询, 查询参数)部分
  * hash: 获取当前地址的哈希值(锚部分)
  * 
  * reload()方法 重新加载当前文档(等同于刷新);
  * replace()方法  装载一个新的url地址, 但是无须为其创建一个新的历史记录
  */
  console.log(location.href);
  console.log(location.protocol);
  console.log(location.host);
  console.log(location.hostname);
  console.log(location.port);
  console.log(location.pathname);
  console.log(location.search);
  console.log(location.hash);
  

• screen对象

  存储了客户端的屏幕信息, 这些信息可以用来探测客户端硬件配置

  screen对象的常用属性:

  1. width/height 屏幕的宽度和高度
  2. availWidth/availHeight 屏幕的可用宽度和可用高度

  console.log(screen.width, screen.height);
  console.log(screen.availWidth, screen.availHeight);
  /*
  * 弹出一个新的窗口, 让弹出的窗口居中显示
  */
  function alertWindowCenter(url) {
      var w = screen.availWidth / 2;
      var h = screen.availHeight / 2;
      var l = (screen.availWidth - w) / 2;
      var t = (screen.availHeight - h) / 2;
      var pos = "width=" + w + ",height=" + h + ",top=" + t + ",left=" + l; 
  				
      var win = window.open(url, "", pos);
  }
  setTimeout(function(){
      alertWindowCenter("http://www.baidu.com");
  }, 2000);