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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
原生javascript实现分页效果
Apr 21 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
JavaScript 数组去重详解
Sep 15 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
python 实现的IP 存活扫描脚本
2020/12/10 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
优秀员工表扬信
2014/01/17 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
商务经理岗位职责
2014/08/03 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
三方合作意向书范本
2015/05/09 职场文书
刑事法律意见书
2015/06/04 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android