JS中的BOM应用

我们曾经讲过JS由三部分组成，其中一个部分就是BOM，用于对浏览器进行操作。这节课我们主要就来介绍BOM。

BOM基础

我们先来看一个BOM的最基础功能：打开、关闭窗口：

rush:js;"> <Meta charset="utf-8"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

open方法用于打开一个窗口，相对的close方法用于关闭一个窗口。这里我们可以用open方法实现一个应用：运行代码。

在这之前，我们要给大家补充一个关于document.write的小知识。

rush:js;"> <Meta charset="utf-8"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

打开源码可以发现，当我们点击了按钮后，整个页面的源码就只剩下了“abc”——也就是说，如果document.write如果放在事件里面使用，会先将页面完全清空再重写。

可以看到，我们的运行代码案例，使用document.write方法是非常合适的：

rush:js;"> <Meta charset="utf-8"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

<br>
  <input id="btn1" type="button" value="运行" />
 </body></html></pre>
</div>
<p>其中_blank代表新打开<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>窗口（在本窗口打开用_self），about:blank代表打开的是<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>空白窗口，然后我们使用document.write向新窗口写入html，就可以在新窗口运行<a href="https://www.jb51.cc/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a>了。</p>
<p>讲完open后，我们来说说close的一些问题。close的使用非常简单，使用window.close便可以执行<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>窗口的事件。但是在火狐浏览器下，是无法close<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>打开的窗口，只有<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>窗口是用open<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>打开的时候才能用close<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>。</p>
<p>讲完open和close<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>后，我们来说两个常用的<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>：window.nevigator.userAgent和window.location。前者的作用是<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前浏览器的版本信息，后者的作用是<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前网页的地址（不仅可以读取，也可以赋值，可以通过<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>location<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>当前网页的网址），大家可以使用一下看看返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，这里就不再列举了。</p>
<p><h3>尺寸及坐标</h3></p>
<p>这里我们讨论一下JS关于尺寸和坐标的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>。</p>
<p>首先要提到的就是关于可视区尺寸的知识。什么是可视区尺寸呢？其实就是<a href="https://www.jb51.cc/tag/yonghuduan/" target="_blank" class="keywords">用户端</a>能在屏幕上看到网页部分的尺寸。可视区的尺寸会随着窗口的大小而变化。</p>
<p>通过<code>document.documentElement.clientWidth和document.documentElement.clientHeight</code>可以<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>可视区的宽度和高度。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<html>
 <head>
  <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="utf-8">
  <title>无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档</title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById('btn1');
   oBtn.onclick=function ()
   {
    alert('宽:'+document.documentElement.clientWidth+'高:'+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可视区大小" />
 </body></html></pre>
</div>
<p><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下：</p>
<p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201802/201822104820896.jpg?201812104843" alt="" /></p></p>
<p>此外针对可视区，还有<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>叫scrollTop，也就是滚动距离，或者说是可视区到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>顶端的距离。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<!DOCTYPE HTML><html>
 <head>
 <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="utf-8">
 <title>无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
<p>//chrome<br />
//alert(document.body.scrollTop);</p>
<p>var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;</p>
<p>alert(scrollTop);<br />
};</p>
</script>
 </head>
 <body style="height:2000px;">
 </body></html></pre>
</div>
<p><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下：</p>
<p>//这里有图</p>
<p>值得注意的是<code>document.documentElement.scrollTop</code>仅仅在ie下兼容，在chrome下的写法则为<code>document.body.scrollTop</code>，因此我们用||<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>处理兼容问题。
常用<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>和事件</p>
<p>这里我们尝试使用除fixed以外的另一种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>实现元素的固定定位（fixed在ie6下不兼容）。</p>
<p>这里我们再画一张图：</p>
<p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201802/201822104921388.jpg?201812104934" alt="" /></p></p>
<p>可以看得出，只要我们将黑线的长度计算出来，就可以将右下方的div块进行固定定位了。而黑线的长度正好等于可视区高度减去div块的offsetHeight。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<html>
 <head>
  <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="utf-8">
  <title>无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档</title>
  <style>
  #div1 {width:200px; height:150px; background:red; position:absolute; right:0; b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var oDiv=document.getElementById('div1');  oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
  };
  </script>
 </head>
 <body>
 <div id="div1"></div>
 </body></html></pre>
</div>
<p><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下：</p>
<p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201802/201822105005514.jpg?201812105019" alt="" /></p></p>
<p>可以看到我们的div块有轻微的抖动，因为onscroll<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>一直在发生，每发生一次便会<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>一次，所以会发生这种情况。此外还存在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>更严重的情况：如果我们改变窗口大小，div块并不会跟着走而是保持在原地，因此我们还要用到另<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>事件——</p>
<p>window.onresize(<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>大小改变时触发的事件：）：
</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
window.onscroll=window.onresize=function (){...}</pre>
</div>
<p>最后我们来说说几个常用的系统对话框：
</p>
<ul>
  <li>alert("<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>") 警告框，没有返回值
  </li>
  <li>confirm("提问的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>") 选择框，会给确定或取消选项，返回<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>boolean
  </li>
  <li>prompt("<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a><a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>","<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>") 会弹出<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>可输入的文本框，返回值为输入的文本<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>（字符串），不输入则为null</li>
</ul>
<p><h3>总结</h3></p>
<p>以上所述是小编给大家介绍的JS中的BOM应用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友！感谢<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/bomp/" class="tag_link" target="_blank">bom</a><a href="https://m.jb51.cc/tag/jsp/" class="tag_link" target="_blank">js</a><a href="https://m.jb51.cc/tag/yingyong/" class="tag_link" target="_blank">应用</a><a href="https://m.jb51.cc/tag/yingyongp/" class="tag_link" target="_blank">应用</a><a href="https://m.jb51.cc/tag/pyingyong/" class="tag_link" target="_blank">应用</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a>
              </div>
              <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a>
              </div>
              <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a>
              </div>
              <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a>
              </div>
              <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a>
              </div>
              <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a>
              </div>
              <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>