您的位置: 首页  >  IT文章  >  JS BOM对象

JS BOM对象

分类: IT文章 • 2023-11-25 21:04:06

BOM即 浏览器对象模型(Browser Object Model)

浏览器对象包括 

  • Window(窗口)
  • Navigator(浏览器)
  • Screen (客户端屏幕)
  • History(访问历史)
  • Location(浏览器地址)


Window(窗口)

JS BOM对象

<script>
function open(){
    myWindow=window.open("http://www.baidu.com");
}
document.write("文档内容");
document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight);
document.write("<br>");

document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight);
document.write("<br>");
</script>
<button onclick="open()">打开一个新窗口</button>

Navigator

Navigator即浏览器对象，提供浏览器相关的信息

JS BOM对象

<script type="text/javascript">
document.write("<p>浏览器产品名称：");
document.write(navigator.appName + "</p>");
 
document.write("<p>浏览器版本号：");
document.write(navigator.appVersion + "</p>");
 
document.write("<p>浏览器内部代码：");
document.write(navigator.appCodeName + "</p>");
 
document.write("<p>操作系统：");
document.write(navigator.platform + "</p>");
 
document.write("<p>是否启用Cookies：");
document.write(navigator.cookieEnabled + "</p>");
 
document.write("<p>浏览器的用户代理报头：");
document.write(navigator.userAgent + "</p>");
</script>

Screen

Screen对象表示用户的屏幕相关信息

如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。（从里到外依次：window,navigator,screen,分别差了浏览器头部，和系统菜单栏）

JS BOM对象

<html>
<body>
<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>

History用于记录访问历史

  • 返回上一次的访问
<script>
function goBack()
  {
     history.back();
  }
</script>
 
<button onclick="goBack()">返回</button>
  • 返回上上次的访问
<script>
function goBack()
  {
     history.go(-2); //-1表示上次，-2表示上上次，以次类推
  }
</script>
 
<button onclick="goBack()">返回上上次</button>

Location表示浏览器中的地址栏

示例 1 : reload方法刷新当前页面

JS BOM对象

<span>当前时间:</span>
<script>
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.write(":");
  document.write(d.getMilliseconds());
 
function refresh(){
  location.reload();
}
</script>
 
<br>
<button onclick="refresh()">刷新当前页面</button>

示例 2 : 跳转到另一个页面

JS BOM对象

<script>
function jump(){
  //方法1
  //location="/";
 
  //方法2
  location.assign("/");
   
}
</script>
 
<br>
<button onclick="jump()">跳转到首页</button>

示例 3: Location的其他属性

JS BOM对象

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);
 
p("主机加端口号 location.host: "+location.host);
p("访问的路径  location.pathname: "+location.pathname);
 
p("锚点 location.hash: "+location.hash);
p("参数列表 location.search: "+location.search);
 
</script>

相关推荐