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 相关文章推荐
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
计算机求职信
2013/12/01 职场文书
银行实习生的自我评价
2014/01/13 职场文书
房地产开盘策划方案
2014/02/10 职场文书
低碳环保倡议书
2014/04/14 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
公积金贷款承诺书
2015/04/30 职场文书
高一数学教学反思
2016/02/18 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers