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);

 1 <body>
 2     <button id="btn1">打开新窗口</button><br>
 3     <button id="btn2">关闭新窗口</button><br>
 4     <button id="btn3">设置窗口大小</button><br>
 5     <button id="btn4">调整窗口大小</button><br>
 6 <script>
 7     var btn1=document.getElementById(‘btn1‘);
 8     var btn2=document.getElementById(‘btn2‘);
 9     var btn3=document.getElementById(‘btn3‘);
10     var btn4=document.getElementById(‘btn4‘);
11     var n;
12 /*1、打开新窗口*/
13     btn1.onclick=function(){
14         // window.open(‘my1.html‘,‘‘,‘width=400,height=200,left=400,top=300‘);//打开具体页面不可以调整大小
15         n=window.open(‘‘,‘‘,‘width=100,height=100,left=400,top=300‘);//打开空白页可以调整大小
16     }
17 /*2、关闭浏览器窗口--window.close()(DOM里设置)*/
18     btn2.onclick=function(){
19         window.close();
20     }
21 /*3、调整窗口大小 ;&大小 */
22     //设置窗口大小;window.resizeTo(width,height);
23     btn3.onclick=function(){
24         n.resizeTo(500,500);
25     }
26     //调整窗口大小:window.resizeBy(width,height);
27     //把窗口大小增加或减小指定的宽度和高度。
28     btn4.onclick=function(){
29         n.resizeBy(100,-100);
30     }
31 </script>
32 </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
单击确认按钮,则返回输入的文本

 1 <body>
 2     <button id="btn">弹窗</button>
 3     <h1 id="con"></h1>
 4 <script>
 5 /*提示框 alert (“ ”);*/
 6     //用户必须先关闭该消息框然后才能继续进行操作
 7     btn.onclick=function(){
 8         alert(‘我只是一个alert弹框!‘);
 9     }
10 /*确认框 confirm(“需要确认的内容”);*/
11     //选择“确定”返回true    选择“取消”返回false
12     var bool=confirm(‘你喜欢喽喽吗‘);
13     if (bool) {
14         console.log(bool);
15         con.innerHTML=‘喽喽爱你‘;
16     } else {
17         console.log(bool);
18         con.innerHTML=‘好幼稚啊!‘;
19     }
20 /*输入框 prompt(“对话框中显示的文本”,"默认的输入文本");*/
21     //单击取消按钮,则返回 null
22     //单击确认按钮,则返回输入的文本
23     var value=prompt(‘喽喽的小名叫什么‘,‘‘)
24     if(value==null){
25         console.log(value);
26         alert(‘对不起,您无权访问1‘);
27     }else{
28         if(value==‘小仙女‘){
29             console.log(value);
30             alert(‘恭喜,访问成功1‘);
31             window.open(‘my1.html‘,‘‘,‘‘);//访问成功,打开新的窗口
32         }else{
33             console.log(value);
34             alert(‘输入验证信息错误,请重新输入!‘);
35         }
36     }
37 </script>
38 </body>

四、location对象

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

 1 <body>
 2     <button id="btn">返回完整的 URL</button>
 3     <button id="btn1">加载新的文档assign()</button>
 4     <button id="btn2">重新加载当前文档reload()</button>
 5     <button id="btn3">用新的文档替换当前文档replace()</button>
 6     <h1 id="con"></h1>
 7 <script>
 8     var x=0;
 9     setInterval(function(){
10         x++;
11         con.innerHTML=x;
12     },1000)
13     btn.onclick=function(){
14         //href:返回完整的 URL。
15         con.innerHTML=location.href;
16         //href 设置完整的 URL
17         //location.href=‘my1.html‘;
18     }
19     btn1.onclick=function(){
20         //assign() 加载新的文档
21         location.assign(‘https://www.baidu.com/‘);
22     }
23     btn2.onclick=function(){
24         //reload() 重新加载当前文档
25         location.reload();
26     }
27     btn3.onclick=function(){
28         //replace() 用新的文档替换当前文档
29         location.replace(‘https://www.taobao.com/‘);
30     }
31 </script>
32 </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

1 <script>
2     var str=‘abcdefcghijk‘;
3     alert(str.indexOf(‘c‘));//2
4     alert(str.indexOf(‘c‘,3));//6
5     alert(str.indexOf(‘A‘));//-1
6 </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>
时间: 2024-10-23 12:50:12

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

JS学习笔记-BOM之window

BOM:BrowserObjectModel,浏览器对象模型,提供JS中对浏览器的各种操作的对象,是JS应用中唯一没有相关标准的部分,这事BOM经常出现问题的所在,主要用于处理浏览器窗口与框架,浏览器特有的JS扩展也被默认为BOM的一部分,而各浏览器之间的公有对象就成了默认的标准.本篇文章将主要介绍window对象. 属性 世界上本没有模型,用的多了也就成了模型.模型便是一个可供参考的东西,BOM中的一系列通用的对象便构成了这个模型,其结构可展示为: window的六大属性,同时它们也是对象:

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

JavaScript——BOM(浏览器对象模型),时间间隔和暂停

BOM(浏览器对象模型):可以对浏览器的窗口进行访问和操作 1.基本的BOM体系: window------------document------------------------------------------anchors | | --frames ----forms | | --history ----images | | --location(浏览器地址)  ----links | | --navigator(获取浏览器信息) ----location | --screen(屏幕

Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

VSTO学习笔记(二)Excel对象模型

原文:VSTO学习笔记(二)Excel对象模型 上一次主要学习了VSTO的发展历史及其历代版本的新特性,概述了VSTO对开发人员的帮助和效率提升.从这次开始,将从VSTO 4.0开始,逐一探讨VSTO开发中方方面面,本人接触VSTO时间不长,也是一次尝试.鉴于Excel在整个Office家族中的重要地位,故先从Excel开始介绍,后续内容会陆续介绍Word.PowerPoint.Outlook.InfoPath等.由于VSTO 4.0建立在Office 2010基础之上,先介绍一下Office

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据