JS中的BOM应用
我们曾经讲过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>
效果如下：
此外针对可视区，还有一个属性叫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下不兼容）。
这里我们再画一张图：
可以看得出，只要我们将黑线的长度计算出来，就可以将右下方的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>
效果如下：
可以看到我们的div块有轻微的抖动，因为onscroll函数一直在发生，每发生一次便会调用一次，所以会发生这种情况。此外还存在一个更严重的情况：如果我们改变窗口大小，div块并不会跟着走而是保持在原地，因此我们还要用到另一个事件——
window.onresize(页面大小改变时触发的事件：）：
window.onscroll=window.onresize=function (){...}
最后我们来说说几个常用的系统对话框：
- alert("内容") 警告框，没有返回值
- confirm("提问的内容") 选择框，会给确定或取消选项，返回一个boolean
- prompt("提示文字","默认文字") 会弹出一个可输入的文本框，返回值为输入的文本内容（字符串），不输入则为null
总结
以上所述是小编给大家介绍的JS中的BOM应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
您可能感兴趣的文章:
- javascript bom是什么及bom和dom的区别
- JavaScript 浏览器对象模型BOM使用介绍
- javascript学习笔记（三）BOM和DOM详解
- PHP中遇到BOM、<feff>编码导致json_decode函数无法解析问题
- 解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
相关推荐
-
PHP中遇到BOM、<feff>编码导致json_decode函数无法解析问题
昨天同事遇到一个奇怪的问题,就是以下代码,无法通过JSON校验,也无法通过PHP的json_decode函数解析. 复制代码 代码如下: [ { "title": "", "pinyin": "" } ] 可能聪明的你已经猜到其中包含有不看见的特殊字符,在vim下查看: 复制代码 代码如下: [ { <feff>"title&quo
-
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
DHTML:它不是一门新的语言,而是HTML.CSS和JavaScript这三者相结合的产物,DHTML包含如下3个含义: (1)通过HTML把网页标记为各个元素 (2)利用CSS设计元素之间的排版样式,并控制各个标记的位置 (3)使用js来控制各个标记JavaScript由三部分组成: (1) ECMAScript是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言.ECMAScript定义了脚本语言的所有特性.对象和方法,其他语言可以实现EC
-
javascript学习笔记（三）BOM和DOM详解
js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM
-
JavaScript 浏览器对象模型BOM使用介绍
BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局
-
javascript bom是什么及bom和dom的区别
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对
-
JS中的BOM应用
我们曾经讲过JS由三部分组成,其中一个部分就是BOM,用于对浏览器进行操作.这节课我们主要就来介绍BOM. BOM基础 我们先来看一个BOM的最基础功能:打开.关闭窗口: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value=&quo
-
JS中BOM相关知识点总结(必看篇)
window对象 ECMAScript是JavaScript的核心,但是如果要在web中使用javascript,那么BOM(浏览器对象模型)才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象:BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 因此,所有全局作用域中声明的变量.函数都会变成w
-
浅谈JS中的常用选择器及属性、方法的调用
选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="
-
JS中Object对象的原型概念基础
对象概念 在 javascript 中, 一切引用类型均为对象. 如 function Foo () {} 中,Foo本身就是一个对象的引用. 创建对象方式 字面量方式 new 构造函数函数声明 Object.create 字面量对象 javascript语言级别快速创建对象的实例 var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量 var obj2 = [obj, 'foo', 'bar']; // Array数组字面量 var obj3 =
-
js中script的上下放置区别，Dom的增删改创建操作实例分析
本文实例讲述了js中script的上下放置区别,Dom的增删改创建操作.分享给大家供大家参考,具体如下: 回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.random if else switch while do-while for 2.DOM Document Object Model 获取DOM事件的三种方式 getElemen
-
js中易弄混淆的"位置"相关属性详解
目录 一.Dom对象属性——距离 二.Bom对象属性——距离 三.Window对象属性——距离 四.Event对象属性——坐标 总结 一.Dom对象属性——距离 1.offsetLeft && offsetTop offsetLeft //返回当前元素左边界到其上级元素(offsetParent)的左边界的距离[只读] offsetTop //返回当前元素上边界到其上级元素(offsetParent)的上边界的距离[只读] 2. offsetWidth && offsetH
-
JS中节流和防抖函数的实现及区别示例
目录 引言 一.概念 二.实现 三.区别 四.Lodash 4-1.throttle 4-2.debounce 五.使用场景 六.总结 引言 在前端开发中,经常和DOM.BOM打交道,例如:窗口的resize.scroll,输入框内容校验,按钮点击等等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕. 此时我们可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率,提高性能的同时又不影响实际效果. 一.概念 函数节流( throttle
-
Angular.js中window.onload(),$(document).ready()的写法浅析
一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi
-
Angular.js中数组操作的方法教程
前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以
-
Angular.js中$resource高大上的数据交互详解
本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(