JavaScript (16)-BOM的介绍

BOM的介绍

JavaScript的组成

JavaScript基础分为三个部分:

ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。browser object model

什么是BOM

BOM:Browser Object Model,浏览器对象模型。

BOM的结构图:

从上图也可以看出:

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

DOM越是BOM的一部分。

window对象:

window对象是JavaScript中的顶级对象

全局变量、自定义函数也是window对象的属性和方法。

window对象下的属性和方法调用时,可以省略window。

下面讲一下 BOM 的常见内置方法和内置对象

弹出系统对话框

比如说,alert(1)是window.alert(1)的简写,因为它是window的子方法。

系统对话框有三种:

    alert();    //不同浏览器中的外观是不一样的

    confirm();//兼容不好

    prompt();  //不推荐使用

打开窗口、关闭窗口

1、打开窗口:

    window.open(url,target,param)

参数解释:

url:要打开的地址。

target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。

param:新窗口的一些设置。

返回值:新窗口的句柄。

param这个参数,可以填各种各样的参数(),比如:

name:新窗口的名称,可以为空

features:属性控制字符串,在此控制窗口的各种属性,属性之间以逗号隔开。

fullscreen= { yes/no/1/0 } 是否全屏,默认no

channelmode= { yes/no/1/0 } 是否显示频道栏,默认no

toolbar= { yes/no/1/0 } 是否显示工具条,默认no

location= { yes/no/1/0 } 是否显示地址栏,默认no。(有的浏览器不一定支持)

directories = { yes/no/1/0 } 是否显示转向按钮,默认no

status= { yes/no/1/0 } 是否显示窗口状态条,默认no

menubar= { yes/no/1/0 } 是否显示菜单,默认no

scrollbars= { yes/no/1/0 } 是否显示滚动条,默认yes

resizable= { yes/no/1/0 } 是否窗口可调整大小,默认no

width=number 窗口宽度(像素单位)

height=number 窗口高度(像素单位)

top=number 窗口离屏幕顶部距离(像素单位)

left=number 窗口离屏幕左边距离(像素单位)

各个参数之间用逗号隔开就行,但我们最好是把它们统一放到json里。

2、关闭窗口:window.close()

(1)和(2)的代码举例:

<!DOCTYPE html>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<ahref="javascript:;">点击我打开一个新的页面</a>

<ahref="javascript:;">点击我关闭本页面</a>

<script>

//新窗口 = window.open(地址,是否开新窗口,新窗口的各种参数);

vara1=document.getElementsByTagName("a")[0];

vara2=document.getElementsByTagName("a")[1];

a1.onclick=function() {

//举例1: window.open("http://www.jx.com","_blank");

varjson={

"name":"helloworld",

"fullscreen":"no",

"location":"no",

"width":"600px",

"height":"400px",

"top":"100px",

"left":"100px"

       };

window.open("http://www.baidu.com","_blank",json);//举例2

   }

//关闭本页面

a2.onclick=function() {

window.close();

   }

</script>

</body>

</html>

3、新窗口相关:

新窗口.moveTo(5,5)

新窗口.moveBy()

新窗口.resizeTo()

window.resizeBy()

代码举例:

varnewWin=window.open("demo.html","_blank",json);

newWin.moveTo(500,500);

location对象

window.location可以简写成location。location相当于浏览器地址栏,可以将url解析成独立的片段。

location对象的属性

href:跳转

hash  返回url中#后面的内容,包含#

host    主机名,包括端口

hostname  主机名

pathname    url中的路径部分

protocol    协议 一般是http、https

search     查询字符串

location.href属性举例

举例1:点击盒子时,进行跳转。

<body>

<div>smyhvae</div>

<script>

vardiv=document.getElementsByTagName("div")[0];

div.onclick=function() {

location.href="http://www.baidu.com";//点击div时,跳转到指定链接

//     window.open("http://www.baidu.com","_blank");  //方式二

   }

</script>

</body>

举例2:5秒后自动跳转到百度

有时候,当我们访问一个不存在的网页时,会提示5秒后自动跳转到指定页面,此时就可以用到location。举例:

<script>

setTimeout(function() {

location.href="http://www.baidu.com";

},5000);

</script>

location对象的方法

location.assign():改变浏览器地址栏的地址,并记录到历史中

设置location.href  就会调用assign()。一般使用location.href 进行页面之间的跳转。

location.replace():替换浏览器地址栏的地址,不会记录到历史中

location.reload():重新加载

navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

userAgent:系统,浏览器)

platform:浏览器支持的系统,win/mac/linux

举例:

console.log(navigator.userAgent);

console.log(navigator.platform);

效果如下:

history对象

1、历史记录管理

2、后退:

history.back()

history.go(-1):0是刷新

3、前进:

history.forward()

history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容