JS BOM

　　之前提到过JS和DOM之间的互动方法。而BOM（Browser Object Module）是浏览器的对象模型，它也可以和JS进行互动。也就是说，JS还可以和浏览器进行互动。因为现代主流浏览器都已经实现了JS中和BOM相关的方法，所以JS对BOM也有很高的通用性和兼容性。下面将通过几种每个浏览器都有的，通用的对象来讲述JS和BOM之间的互动方式

■　　通用方法

　　alert(msg)　　不用我说这是干什么的了把。。这些弹出框，和页面是不相关的，自然它们就是浏览器对象BOM的一部分了

　　prompt(msg)　　弹出一个可以让用户输入一些字符串的提示框

　　confirm(msg)　　弹出一个带确定和取消按钮的弹出框

■　　window对象

　　window对象抽象的是浏览器的窗口,即用户的视口。DOM中常用的文档的抽象document对象也是window对象的一个属性：window.document

　　属性：

　　　　window.innerHeight　　浏览器内部窗口高度

　　　　window.innerWidth　　浏览器内部窗口宽度

　　方法：

　　　　window.open(URL[,name[,feature[,replace]]])　　打开窗口,name参数为窗口指定一个名称，可以拿来作为<a>等元素的target属性值用，如果之前存在了指定name的窗口，那么不再新建而是引用现有窗口。feature是个字符串指明了新开窗口的一些样式（哪些样式参数可调整参见http://www.w3school.com.cn/jsref/met_win_open.asp#windowfeatures）。replace是boolean，指出是否替换历史记录。

　　　　window.close()　　关闭窗口

　　　　window.moveTo(x,y)　　移动窗口到

　　　　window.resizeTo(x,y)　　改变窗口大小

　　　　window.scrollTo(posx,posy)　　将显示的左上角变成页面的x,y坐标なれるように滚动页面

　　　　window.blur()　　把焦点从本窗口移开

　　　　window.focus()　　把焦点移到本窗口

■　　window.screen对象

　　window.screen对象抽象的是用户的屏幕，在编程的时候可以省略window直接写screen構わない。

　　属性:

　　　　screen.availHeight　　用户屏幕高度

　　　　screen.availWidth　　用户屏幕宽度

　　　　*这两个和window的那俩尺寸属性不太一样，比如浏览器窗口没最大化，或者一个页面里面有多个iframe（每个也算一个独立的窗口）时，窗口尺寸会变小，但是屏幕尺寸是不变的。

■　　window.location对象

　　window.location对象抽象的是页面的URL。和screen一样，写的时候可以不要window做前缀

　　属性：

　　　　location.href　　当前页面的完整URL

　　　　location.hostname　　web主机的域名

　　　　location.pathname　　当前页面路径或文件名

　　　　location.port　　当前连接的端口

　　　　location.protocol　　当前连接的协议

　　方法：

　　　　location.assign(new_url)　　让当前窗口重新加载一个新的页面

■　　window.history对象

　　history对象维护了用户的历史操作信息，和上面的一样可以省去window前缀

　　方法：

　　　　history.back()　　相当于浏览器的后退

　　　　history.forward()　　相当于浏览器的前进

　　　　

■　　window.navigator对象

　　navigator对象维护的是本次请求中浏览器的信息，也可以去掉window前缀

　　直接看个实例吧：

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

txt+= "<p>Browser Name: " + navigator.appName + "</p>";

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

txt+= "<p>Platform: " + navigator.platform + "</p>";

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

　　得到的结果是：

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows)

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

User-agent language: undefined

　　

■　　消息框对象

　　JS调用消息框对象时大多数时候是调用了其构造方法来跳出一个消息框。消息框大概有以下几种：　　

　　alert(message)　　提示框

　　confirm(message)　　确认框，用户点确定返回true，取消返回false

　　prompt(message,defaultvalue)　　提升输入框，用户输入后点击确认返回输入值，点击取消返回默认值，如果默认值未设置则返回null

■　　计时对象

　　JS可以调用以下两个方法来设置/取消计时，设置计时相当于是设置让某些动作在固定时间后发生

　　setTimeout("some_javascript",milisecond)　　注意两点，1.计时的单位是毫秒 2.第一个参数不是函数或者其他什么对象，而是字符串。也就是说，必须传字符串进去，然后JS会对这个字符串进行解析然后执行。setTimeout方法会返回一个计时对象。

　　clearTimeout(timeout_object)　　参数是一个计时对象，用来取消这个计时对象定下的计时任务。

　　来综合看一个示例,这个实例按下start count按钮后每隔一秒增加一个count，无限循环直到按下stop count按钮

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

 {

 document.getElementById('txt').value=c

 c=c+1

 t=setTimeout("timedCount()",1000)

 }

function stopCount()

 {

 clearTimeout(t)

 }

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

</body>

</html>

　　

【JS】 Javascript与BOM的互动 寻路的更多相关文章

  1. 【JS】 Javascript与HTML DOM的互动 寻路

    JS HTML DOM DOM的全程是Document Object Module,即文档对象模型.一般来说,当一个页面被加载时,浏览器会在内部创建一个当前文档的DOM.就像用python的Etree ...

  2. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  3. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  4. JavaScript(4)---BOM详解

    JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...

  5. [JavaScript之BOM与DOM]

    [JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...

  6. Atitit.js javascript的rpc框架选型

    Atitit.js javascript的rpc框架选型 1. Dwr1 2. 使用AJAXRPC1 2.2. 数据类型映射表1 3. json-rpc轻量级远程调用协议介绍及使用2 3.1. 2.3 ...

  7. Immutable.js – JavaScript 不可变数据集合

    不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...

  8. Js(javaScript)的闭包原理

    问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  小编 ...

  9. 【转】Eclipse去除js(JavaScript)验证错误

    这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...

随机推荐

  1. Java报SQLException

    Java报SQLException 具体错误如下: java.sql.SQLException:Column count doesn't match value count at row 1

  2. vxWorks下intel82567v3网卡驱动的更新

    /* 82567 devicesID */ #define INTEL_DEVICEID_82567LF              0x10BF#define INTEL_DEVICEID_82567 ...

  3. 如何在BIOS中设置RAID？

    随着价格的下降和相应主板的支持,目前SATA硬盘已经逐渐成为主流.但由于受芯片组和操作系统的影响,不少用户对SATA硬盘的使用及安装系统掌握不足,今天小编就给大家介绍一下SATA硬盘的日常应用技巧,希 ...

  4. Linux显示以时间生升序显示文件

    Linux显示以时间生升序显示文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -lnt 总用量 56 -rw-rw-r-- 1 1000 1000 ...

  5. INS-30011 输入的ADMIN口令不符合Oracle建议的标准

    1.错误描述 2.错误原因 由于在设置密码时,首个字符为数字,导致出错 a.必须以字母开头 b.长度不超过30个字符 c.只能包含字母.数字和_.$.# d.不能使用关键字和保留字 3.解决办法 重新 ...

  6. tar、scp、sftp、rsync简单使用

    tar -c 创建一个归档文件 -z 指定压缩格式为gzip -v 显示详细信息 -f 制定文件明 -j 指定压缩格式为bz2 -J 指定压缩格式为 xz -C 压缩.解压至某个目录 -x 自动识别压 ...

  7. 【原】关于定时回查出现的BUG有感

    前言:今天有同事反映说客户在平台投标后,看到的是失败状态,但是钱在某银行的状态是被冻结了,我这边给出答复是只有投标成功才会冻结. 首先写下流程:P2P对接某银行托管,某银行的部分接口要求我们通过同步回 ...

  8. 【BZOJ4736】温暖会指引我们前行（Link-Cut Tree）

    [BZOJ4736]温暖会指引我们前行(Link-Cut Tree) ##题面 神TM题面是UOJ的 题解 LCT傻逼维护最大生成树 不会的可以去做一做魔法森林 #include<iostrea ...

  9. [Luogu3121][USACO15FEB]审查Censoring

    题面 sol 开一个栈记录依次经过的\(AC\)自动机上的节点编号以及这一次的字母,若匹配到一个串就直接弹掉栈顶的\(len\)个元素,\(len\)为匹配到的模式串长度.弹栈顶直接\(top-=le ...

  10. [Luogu2057]善意的投票

    题目戳我 题目描述 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可以投 ...