JS中的BOM应用


Posted in Javascript onFebruary 02, 2018

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

BOM基础

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

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="打开窗口" onclick="window.open('http://www.zhinengshe.com/');" />
 </body></html>

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

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

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write('abc')" />
 </body></html>

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

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

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById('txt1');
   var oBtn=document.getElementById('btn1');
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open('about:blank', '_blank');
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="运行" />
 </body></html>

其中_blank代表新打开一个窗口(在本窗口打开用_self),about:blank代表打开的是一个空白窗口,然后我们使用document.write向新窗口写入html,就可以在新窗口运行html代码了。

讲完open后,我们来说说close的一些问题。close的使用非常简单,使用window.close便可以执行关闭窗口的事件。但是在火狐浏览器下,是无法close一个用户打开的窗口,只有一个窗口是用open方法打开的时候才能用close方法关闭。

讲完open和close方法后,我们来说两个常用的属性:window.nevigator.userAgent和window.location。前者的作用是获取当前浏览器的版本信息,后者的作用是获取当前网页的地址(不仅可以读取,也可以赋值,可以通过修改location跳转当前网页的网址),大家可以使用一下看看返回的内容,这里就不再列举了。

尺寸及坐标

这里我们讨论一下JS关于尺寸和坐标的内容。

首先要提到的就是关于可视区尺寸的知识。什么是可视区尺寸呢?其实就是用户端能在屏幕上看到网页部分的尺寸。可视区的尺寸会随着窗口的大小而变化。

通过document.documentElement.clientWidth和document.documentElement.clientHeight可以获取当前页面可视区的宽度和高度。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</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>

效果如下:

JS中的BOM应用

此外针对可视区,还有一个属性叫scrollTop,也就是滚动距离,或者说是可视区到页面顶端的距离。

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>

效果如下:

//这里有图

值得注意的是document.documentElement.scrollTop仅仅在ie下兼容,在chrome下的写法则为document.body.scrollTop,因此我们用||方法处理兼容问题。
常用方法和事件

这里我们尝试使用除fixed以外的另一种方法实现元素的固定定位(fixed在ie6下不兼容)。

这里我们再画一张图:

JS中的BOM应用

可以看得出,只要我们将黑线的长度计算出来,就可以将右下方的div块进行固定定位了。而黑线的长度正好等于可视区高度减去div块的offsetHeight。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
  #div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom: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>

效果如下:

JS中的BOM应用

可以看到我们的div块有轻微的抖动,因为onscroll函数一直在发生,每发生一次便会调用一次,所以会发生这种情况。此外还存在一个更严重的情况:如果我们改变窗口大小,div块并不会跟着走而是保持在原地,因此我们还要用到另一个事件——

window.onresize(页面大小改变时触发的事件:):

window.onscroll=window.onresize=function (){...}

最后我们来说说几个常用的系统对话框:

  • alert("内容") 警告框,没有返回值
  • confirm("提问的内容") 选择框,会给确定或取消选项,返回一个boolean
  • prompt("提示文字","默认文字") 会弹出一个可输入的文本框,返回值为输入的文本内容(字符串),不输入则为null

总结

以上所述是小编给大家介绍的JS中的BOM应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
微信小程序实现文字跑马灯效果
May 26 #Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 #Javascript
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php商品对比功能代码分享
2015/09/24 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JS表的模拟方法
2015/02/05 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
鼋头渚导游词
2015/02/05 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
写好Python代码的几条重要技巧
2021/05/21 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python