【JS】 Javascript与BOM的互动 寻路
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的互动 寻路的更多相关文章
- 【JS】 Javascript与HTML DOM的互动 寻路
JS HTML DOM DOM的全程是Document Object Module,即文档对象模型.一般来说,当一个页面被加载时,浏览器会在内部创建一个当前文档的DOM.就像用python的Etree ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- JavaScript(4)---BOM详解
JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...
- [JavaScript之BOM与DOM]
[JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...
- Atitit.js javascript的rpc框架选型
Atitit.js javascript的rpc框架选型 1. Dwr1 2. 使用AJAXRPC1 2.2. 数据类型映射表1 3. json-rpc轻量级远程调用协议介绍及使用2 3.1. 2.3 ...
- Immutable.js – JavaScript 不可变数据集合
不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...
- Js(javaScript)的闭包原理
问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 小编 ...
- 【转】Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...
随机推荐
- NLP︱句子级、词语级以及句子-词语之间相似性（相关名称：文档特征、词特征、词权重）
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 关于相似性以及文档特征.词特征有太多种说法.弄 ...
- vxWorks下dosFs文件系统的创建
.cdromFs:允许系统从按照ISO9660标准文件系统格式化的CD-ROM上读取设备: 通常文件系统驱动位于磁盘(块存取)设备驱动和IO系统之间,这一点在VxWorks中也不例外,但它在此基础上扩 ...
- HTML5可以省略结束标记的元素
HTML5可以省略结束标记的元素 1.dd 2.dt 3.li 4.p 5.optgroup 6.option 7.rt 8.rp 9.thread 10.tfoot 11.tr 12.td 13.t ...
- Codeforces Round #454 D. Seating of Students
分三类 1 1: 一个就好了 3 3:特殊讨论下 或 : 第一行奇序号的数放前面,偶序号的数放后面,第二行奇序号的数放前面,偶序号的数放后面,第二行依次类推 有点难写,真的菜 #include< ...
- Octave 命令积累
Octave Learning : puts all elements into a single vector :put B at A's right :put B at A's Bottom :将 ...
- 复制粘贴之插件（jquery.zclip.min.js）需要安装flash
.line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;marg ...
- js中的回调函数的理解
一,常见的但是不是特别注意的回调方法. 1.1,ajax $.ajax({ url:"test.json", type: "GET", data: {usern ...
- js 数组去重常见的几种方式
1.利用标记 var arr = [2,6,2,6,4,3,16];// arr = [2,6,4,3,16] function norepeat(arr){ var res = []; for(va ...
- [Luogu3345][ZJOI2015]幻想乡战略游戏
Luogu 题意: 动态维护带权重心. sol 这是一道写起来很舒服的动态点分治.(不像某些毒瘤题) 我们考虑,如果你选择的补给点不是当前的带权重心,那么带权重心就在补给点的一个子树中(你把补给点当做 ...
- 用Tortoisegit往GitHub上push时，失败并显示git did not exit cleanly (exit code 1)，可能是GitHub的Email的原因
之前我看到错误,总是没有耐心地读完整个错误,而是不假思索地搜索一部分错误,导致偏离正确轨道,相当于号错脉了,比如这里只是搜索git did not exit cleanly (exit code 1) ...