JS学习笔记8之 BOM-浏览器对象模型

*什么是BOM

-->BOM (Browser Object Model) 浏览器对象模型
-->BOM提供了独立于内容而与浏览器窗口进行交互的对象
-->BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
-->BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分

*BOM主要内容

-->window对象是浏览器中的Global对象
-->窗口设置 (打开、大小、位置)
-->间歇调用与超时调用
-->对话框 (提示框、确认框、输入框)
-->location对象 (位置对象包含各种属性和方法)
-->navigator对象用于提供用户浏览器的相关信息
-->screen对象包含有关用户屏幕的信息
-->history对象包含有关用户的访问历史记录

（本篇内容有些内容不常用，可以着重掌握标红标重的部分）

一、窗口设置 (打开、大小、位置)

1、打开新窗口

window.open(URL,name,specs);
URL：打开页面的URL，没有指定URL将打开新的空白窗口（默认）
name：_blank 新窗口打开（默认）
　　_self 当前页面打开
　　　 name 窗口名称 ......
specs：一个逗号分隔的项目列表。支持以下值：
　　　height=pixels 窗口的高度，最小值为100
　　　width=pixels 窗口的宽度，最小值为100
　　　left=pixels top=pixels ......
示例 window.open('','','width=200,height=200');

2、关闭窗口

window.close() 方法用于关闭浏览器窗口
(DOM window对象的方法)
close() 方法将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

3、窗口大小

设置窗口大小 window.resizeTo(width,height);
调整窗口大小 window.resizeBy(width,height);

 <body>

     <button id="btn1">打开新窗口</button><br>

     <button id="btn2">关闭新窗口</button><br>

     <button id="btn3">设置窗口大小</button><br>

     <button id="btn4">调整窗口大小</button><br>

 <script>

     var btn1=document.getElementById('btn1');

     var btn2=document.getElementById('btn2');

     var btn3=document.getElementById('btn3');

     var btn4=document.getElementById('btn4');

     var n;

 /*1、打开新窗口*/

     btn1.onclick=function(){

         // window.open('my1.html','','width=400,height=200,left=400,top=300');//打开具体页面不可以调整大小

         n=window.open('','','width=100,height=100,left=400,top=300');//打开空白页可以调整大小

     }

 /*2、关闭浏览器窗口--window.close()(DOM里设置)*/

     btn2.onclick=function(){

         window.close();

     }

 /*3、调整窗口大小 ;&大小 */

     //设置窗口大小；window.resizeTo(width,height);

     btn3.onclick=function(){

         n.resizeTo(500,500);

     }

     //调整窗口大小:window.resizeBy(width,height);

     //把窗口大小增加或减小指定的宽度和高度。

     btn4.onclick=function(){

         n.resizeBy(100,-100);

     }

 </script>

 </body>

4、窗口位置

window.screenLeft属性返回窗口相对于屏幕的X坐标
window.screenTop属性返回窗口相对于屏幕的Y坐标
window.screenX属性返回窗口相对于屏幕的X坐标
window.screenY属性返回窗口相对于屏幕的Y坐标

5、窗口可视区尺寸

document.documentElement.clientWidth
document.body.clientWidth
document.documentElement.clientHeight
document.body.clientHeight

<body>

    <button id="btn">获取</button>

    <h3 id="con1"></h3>

    <h3 id="con2"></h3>

    <h3 id="con3"></h3>

    <h3 id="con4"></h3>

</body>

<script>

    btn.onclick=function(){

        con1.innerHTML='窗口相对于屏幕的X坐标:'+window.screenLeft+'窗口相对于屏幕的Y坐标:'+window.screenTop;

        con2.innerHTML='窗口相对于屏幕的X坐标:'+window.screenX+'窗口相对于屏幕的Y坐标:'+window.screenY;

        con3.innerHTML='窗口可视区宽度'+document.documentElement.clientWidth+'窗口可视区高度'+document.documentElement.clientHeight;

        con4.innerHTML='文档宽度'+document.documentElement.offsetWidth+'文档高度'+document.documentElement.offsetHeight;

    }

</script>

6、窗口垂直滚动条
document.body.scrollTop(无文档声明)
document.documentElement.scrollTop

二、BOM计时器

1、间歇调用
setInterval ( 函数/名称 , 毫秒数 )
表示每经过一定的毫秒后，执行一次相应的函数(重复)

2、超时调用
setTimeout ( 函数/名称 , 毫秒数 )
表示经过一定的毫秒后，只执行一次相应的函数(不重复)
清除计时器：clearInterval( ); clearTimeout( );

三、BOM对话框

1、提示框 alert (“ ”);
用户必须先关闭该消息框然后才能继续进行操作

2、确认框 confirm(“ ”);
confirm(“需要确认的内容”);
选择“确定”返回true 选择“取消”返回false

3、输入框 prompt(“ ”,“ ”);
prompt(“对话框中显示的文本”,"默认的输入文本");
单击取消按钮，则返回 null
单击确认按钮，则返回输入的文本

 <body>

     <button id="btn">弹窗</button>

     <h1 id="con"></h1>

 <script>

 /*提示框 alert (“ ”);*/

     //用户必须先关闭该消息框然后才能继续进行操作

     btn.onclick=function(){

         alert('我只是一个alert弹框!');

     }

 /*确认框 confirm(“需要确认的内容”);*/

     //选择“确定”返回true    选择“取消”返回false

     var bool=confirm('你喜欢喽喽吗');

     if (bool) {

         console.log(bool);

         con.innerHTML='喽喽爱你';

     } else {

         console.log(bool);

         con.innerHTML='好幼稚啊!';

     }

 /*输入框 prompt(“对话框中显示的文本”,"默认的输入文本");*/

     //单击取消按钮，则返回 null

     //单击确认按钮，则返回输入的文本

     var value=prompt('喽喽的小名叫什么','')

     if(value==null){

         console.log(value);

         alert('对不起，您无权访问1');

     }else{

         if(value=='小仙女'){

             console.log(value);

             alert('恭喜,访问成功1');

             window.open('my1.html','','');//访问成功，打开新的窗口

         }else{

             console.log(value);

             alert('输入验证信息错误，请重新输入！');

         }

     }

 </script>

 </body>

四、location对象

location对象包含有关当前页面的URL信息
属性：
host 设置或返回主机名和当前 URL 的端口号。
port 设置或返回当前 URL 的端口号。
href 设置或返回完整的 URL。 ……
方法：三条语句分开使用
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

 <body>

     <button id="btn">返回完整的 URL</button>

     <button id="btn1">加载新的文档assign()</button>

     <button id="btn2">重新加载当前文档reload()</button>

     <button id="btn3">用新的文档替换当前文档replace()</button>

     <h1 id="con"></h1>

 <script>

     var x=0;

     setInterval(function(){

         x++;

         con.innerHTML=x;

     },1000)

     btn.onclick=function(){

         //href:返回完整的 URL。

         con.innerHTML=location.href;

         //href 设置完整的 URL

         //location.href='my1.html';

     }

     btn1.onclick=function(){

         //assign() 加载新的文档

         location.assign('https://www.baidu.com/');

     }

     btn2.onclick=function(){

         //reload() 重新加载当前文档

         location.reload();

     }

     btn3.onclick=function(){

         //replace() 用新的文档替换当前文档

         location.replace('https://www.taobao.com/');

     }

 </script>

 </body>

五、navigator对象

1、navigator对象部分属性
appCodeName 返回浏览器的代码名。
appName 返回浏览器的名称。
cookieEnabled 返回指明浏览器中是否启用cookie的布尔值。
platform 返回运行浏览器的操作系统平台。
appVersion 返回浏览器的平台和版本信息。
userAgent 返回由客户机发送服务器的user-agent头部的值。用户代理

<body>

<h4 id="con1"></h4>

<h4 id="con2"></h4>

<h4 id="con3"></h4>

<h4 id="con4"></h4>

<h4 id="con5"></h4>

<h4 id="con6"></h4>

<script>

    con1.innerHTML='浏览器的代码名:'+navigator.appCodeName;

    con2.innerHTML='浏览器的名称:'+navigator.appName;

    con3.innerHTML='返回指明浏览器中是否启用cookie的布尔值:'+navigator.cookieEnabled;

    con4.innerHTML='运行浏览器的操作系统平台:'+navigator.platform;

    con5.innerHTML='浏览器的平台和版本信息:'+navigator.appVersion;

    con6.innerHTML='用户代理：由客户机发送服务器的user-agent头部的值:'+navigator.userAgent;

</script>

</body>

2、用户浏览器识别码
var str=window.navigator.userAgent;
var str=window.navigator.appVersion;
alert(str);
3、大小写转换
str.toLowerCase( ); 转换成小写
str.toUpperCase( ); 转换成大写

实例：用浏览器识别码和大小写转换-->判断浏览器

<script>

    var str=window.navigator.userAgent.toLowerCase();//获取用户浏览器识别码并转换成小写

    if (str.indexOf('chrome')!=-1) {

        alert('是谷歌浏览器');

    }else if(str.indexOf('firefox')!=-1){

        alert('是火狐浏览器');

    }else if(str.indexOf('msie')!=-1){

        alert('是IE8浏览器');

    };

</script>

六、indexOf()方法

定义和用法
indexOf( )方法可返回某个指定的字符串值在字符串中首次出现的位置
语法：string.indexOf(str,index);
参数：str-------规定需检索的字符串值
　　　index----规定在字符串中开始检索的位置
注意：indexOf( ) 方法对大小写敏感
　　　如果要检索的字符串值没有出现，则该方法返回 -1

 <script>

     var str='abcdefcghijk';

     alert(str.indexOf('c'));//

     alert(str.indexOf('c',3));//

     alert(str.indexOf('A'));//-1

 </script>

七、screen对象

screen 对象包含有关客户端显示屏幕的信息
width 返回显示器屏幕的宽度。
height 返回显示器屏幕的高度。
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

八、history对象

history 对象包含用户在浏览器中访问过的URL
length 返回浏览器历史列表中的 URL 数量。
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
history.go(-1) 后退一页
history.go(1) 前进一页

实例：(关于付款成功后返回到上一页的设置)

BOM计时器_history_付款1.html

<body>

    <h1>付款页面</h1>

    <a href="BOM计时器_history_付款2.html">付款</a>

</body>

BOM计时器_history_付款2.html

<body>

    <h1>恭喜！付款成功！</h1>

    <button id="btn">返回上一页</button>

    <span><var id="num">5</var>后自动返回上一页!</span>

<script>

    var btn=document.getElementById('btn');

    var num=document.getElementById('num');

    var timer=null,x=5;

    btn.onclick=function(){

        window.history.go(-1);

    }

    timer=setInterval(function(){

        x--;

        if (x<=0) {

            window.history.go(-1);

        }

        num.innerHTML=x;

    },1000)

</script>

</body>

JS学习笔记8之 BOM-浏览器对象模型的更多相关文章

JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM
转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...
【学习笔记】八：浏览器对象模型BOM
1.window对象 window是BOM的核心,它既是JS访问浏览器的一个接口,又是ES规定的Global对象. 1)全局作用域对象 a.所有在全局作用域中声明的变量.函数都会成为window对象的 ...
JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
Node.js学习笔记（1）：Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装下载官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
VSTO学习笔记（二）Excel对象模型
原文:VSTO学习笔记(二)Excel对象模型上一次主要学习了VSTO的发展历史及其历代版本的新特性,概述了VSTO对开发人员的帮助和效率提升.从这次开始,将从VSTO 4.0开始,逐一探讨VSTO ...
第一百一十一节，JavaScript，BOM浏览器对象模型
JavaScript,BOM浏览器对象模型学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
一点感悟：《Node.js学习笔记》star数突破1000+
写作背景笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
生命不息学习不止，前端js学习笔记（一）
引言从毕业到年已经整整7年,期间一直从事.net开发做c/s从 c# 转到 wpf 而后又开始做b/s 用silverlight,从最开始的arcgis engine 到后来的silverlight ...
【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

随机推荐

《C#高级编程》学习总结之LINQ
一.标准的查询操作符标准查询操作符说明 Where OfType<TResult> 筛选操作符定义了返回元素的条件. Select SelectMany 投射操作符用于把对象转换为另一 ...
Visulalization Voronoi in OpenSceneGraph
Visulalization Voronoi in OpenSceneGraph eryar@163.com Abstract. In mathematics a Voronoi diagram is ...
.Net 转战 Android 4.4 日常笔记（7）--apk的打包与反编译
apk(android package)就是我们安卓系统的安装文件,可以在模拟器和手机中直接打开安装,从项目中打包apk有几种方式可取一.最简单的方法(类似我们的winfrom) 只要我们调试或者运 ...
Delete Volume 操作 - 每天5分钟玩转 OpenStack（57）
今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...
效率和协作工具--OneNote
身边有很多的朋友,都是在电脑上办公.除了会计和外贸相关的工作,用到Excel,公司的ERP比较多.日常工作中,特别是事情一多,大家基本不知道从何处完成今天的任务,而已有时经常丢三落四.同事在QQ或者M ...
C# 对象锁——Monitor
Monitor里边有一些static方法,可以用于在对象上获取同步锁,来进行一些进程同步控制操作用法及注意点如下: using System; using System.Collections.Ge ...
pixi.js教程中文版--基础篇
前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...
C算法编程题（三）画表格
前言上一篇<C算法编程题(二)正螺旋> 写东西前还是喜欢吐槽点东西,要不然写的真还没意思,一直的想法是在博客园把自己上学和工作时候整理的东西写出来和大家分享,就像前面写的<T-Sq ...
关于在用curl函数post网页数据时，遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法
curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id 标识的 <input type= ...
Understanding delete
简述我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...

JS学习笔记8之 BOM-浏览器对象模型

JS学习笔记8之 BOM-浏览器对象模型的更多相关文章

随机推荐

热门专题