BOM(浏览器对象模型)

一. window

1.定义

• window是js在浏览器环境中 全局变量
• 函数就是window的方法

• 全局变量就是window的属性

  2.属性

• document
• location
• history
• screen
• navigator
• innerWidth 文档区域宽度
• innerHeight 文档区域高度
• outerWidth 浏览器窗口宽度

• outerHeight 浏览器窗口高度

  document.write("window.innerWidth : "+window.innerWidth+"<br>");
  document.write("window.innerHeight : "+window.innerHeight+"<br>");
  
  document.write("window.outerWidth : "+window.outerWidth+"<br>");
  document.write("window.outerHeight : "+window.outerHeight+"<br>");

• name 窗口的名字

  <script>
  window.name = "xiaoyanyan";
  </script>

• parent 父窗口

  <buttononclick="window.parent.document.body.style.color='red    '">改变父窗口</button>

• top 顶层窗口
• length 子窗口的数量

• frames 子窗口的集合

  <iframe src="01s.html" frameborder="0"></iframe>
  <iframe src="02.html" frameborder="0"></iframe>

  3.方法

• alert（）警告框
• confirm（） 确认框
• prompt（） 可输入弹框
• setInterval()
• clearInterval()
• setTimeout()
• clearTimeout()

• open() 打开新窗口

  <button onclick="window.open('http://www.itxdl.cn')">open</button>//跳转打开新窗口
  <button onclick="window.open('http://www.itxdl.cn', 'xiaoyanyan')">本窗口open</button>//在本窗口打开窗口
  <button onclick="window.open('01s.html', '', 'width=400,height=400')">opend对打开的窗口设置</button>//在本窗口打开一个小窗口

• close () 关闭窗口

• print（） 打印

  <button onclick="window.print()">打印</button>

• scrollBy（） 按照指定像素滚动内容

• scrollTo（） 把内容滚动到指定位置

  <div class="topBar" onclick="gotoTop()">
  TOP
  </div>
  
  <script>
  function gotoTop(){
  //获取滚动条滚动的距离
  var top = document.body.scrollTop;
  
  if (top === 0) {
  return;
  }
  
  //window.scrollTo(0, 0);
  window.scrollBy(0, -200);
  
  setTimeout(gotoTop, 50);
  }
  </script>

• moveBy() 可相对窗口的当前坐标把它移动指定的像素。 仅IE
• moveTo() 把窗口的左上角移动到一个指定的坐标。 仅IE
• resizeBy() 按照指定的像素调整窗口的大小。 仅IE

• resizeTo() 把窗口的大小调整到指定的宽度和高度。 仅IE

  二. location (地址位置)

  1.属性

• href 完整的url
• protocol 协议
• hostname 主机名
• port 端口号
• host 主机名和端口号
• pathname 文件路径
• search 查询部分

• hash 锚点部分

  document.write("href: "+location.href+"<br>");
  document.write("协议："+location.protocol+"<br>");
  document.write("主机名："+location.hostname+"<br>");
  document.write("端口名："+location.port+"<br>");
  document.write("主机名+端口号："+location.host+"<br>");
  document.write("锚的部分："+location.hash+"<br>");
  document.write("查询部分："+location.search+"<br>");
  document.write("路径部分："+location.pathname+"<br>");

  2.方法

• reload（） 重新加载当前文档
• assign（） 加载新的文档

• replace（） 用新的文档替换当前文档

  <button onclick="location.reload()">reload</button>
  <button onclick="location.assign('02.html')">assign</button>
  <button onclick="location.replace('01s.html')">replace</button>

  三.history (历史记录)

  1.属性

• length 历史记录的数量

  2.方法

• back（） 回退一步
• forward（） 前进一步

• go（n） 前进/后退n步

  <button onclick="history.back()">后退一步</button>
  <button onclick="history.go(-1)">后退一步</button>
  <button onclick="history.go(-3)">后退三步</button>
  <button onclick="history.forward()">前进一步</button>
  <button onclick="history.go(2)">前进二步</button>

  四.screen（屏幕）

  1.属性

• width 屏幕宽度

• height 屏幕高度

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

  五.navigator(导航)

  1.属性

• userAgent 平台，浏览器相关的信息
• platform 平台
• appName 返回浏览器的名称
• appVersion 返回浏览器的平台和版本信息
• userAgent 返回由客户机发送服务器的 user-agent 头部的值
• onLine 返回指明系统是否处于脱机模式的布尔值
• appCodeName 返回浏览器的代码名

• cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值

  console.log("appCodeName: "+navigator.appCodeName);
  // appCodeName 返回浏览器的代码名
  console.log("userAgent "+ navigator.userAgent);//userAgent  返回由客户机发送服务器的 user-agent 头部的值。
  console.log("appCodeName: "+navigator.appName);
  // appName返回浏览器的名称
  console.log("appVersion: "+navigator.appVersion);
  //appVersion    返回浏览器的平台和版本信息
  console.log("platform: "+navigator.platform);
  //platform  返回运行浏览器的操作系统平台

  补充

  浏览器内核

• 内核应该包含渲染引擎/JS引擎
• 渲染引擎负责渲染HTML和CSS,JS引擎负责运行JS

• 现在提到浏览器内核也可以单指渲染引擎

常见的浏览器内核

• webkit (chrom safari)
• blink (webkit的改型，chrome,opera)
• trident IE
• Gecko Firfox
• Kestrel 老欧朋

URL URI 区别

• URI 标准 中包含 URN 和 URL
• URI： 统一资源标示符
• URN：统一资源命名符
• URL： 统一资源定位符