【JS】 Javascript与BOM的互动 寻路

JS BOM

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

■  window对象

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

  属性:

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

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

  方法:

    window.open()  打开窗口

    window.close()  关闭窗口

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

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

■  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>

  

时间: 2024-11-05 16:06:42

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

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

JS HTML DOM DOM的全程是Document Object Module,即文档对象模型.一般来说,当一个页面被加载时,浏览器会在内部创建一个当前文档的DOM.就像用python的Etree之类的模块解析xml文件时建立的对象一样,浏览器建立的DOM对象抽象了整个html文件,并且形成了一颗html元素的树. 而JS,就被赋予了和这种DOM互动的能力.也就是说,JS可以通过增删改查DOM来实现动态灵活地改变html内容.比如JS可以做到:更改html元素,更改html元素的属性,更改c

Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae

Atitit.js javascript异常处理机制与java异常的转换.js exception processVoae 1. 1. javascript异常处理机制 1 2. 2. Web前后台异常的统一处理 1 3.  java异常转换为js异常 1 3. -------------详细代码 2 1. 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. 2. Web前后台异常

Atitit.&#160;数据约束&#160;校验&#160;原理理论与&#160;架构设计&#160;理念模式java&#160;php&#160;c#.net&#160;js&#160;javascript&#160;mysql&#160;oracle

Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3. 检查约束 (Check Counstraint) 对该列数据的范围.格式的限制(如:年龄.性别等)2 4. 默认约束 (Default Counstraint) 该数据的默认值2 5. trigger2 6. 外键机制  参照完整性:2 7. 断言约束:不必与特定的列绑定,可以理解为能应用于多个表的

js javascript:void(0) 真正含义

http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html js javascript:void(0) 真正含义 我想使用过ajax的都常见这样的代码:<a href="javascript:doTest2();void(0);">here</a>但这儿的void(0)究竟是何含义呢?Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值.void 操作符用法格式如下:1

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

jquery js javascript select 无限级 插件 优化foxidea版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

js/javascript代码注释规范与示例

注释在代码编写过程中的重要性,写代码超过半年的就能深深的体会到.没有注释的代码都不是好代码.为了别人学习,同时为了自己以后对代码进行‘升级’,看看js/javascript代码注释规范与示例.来自:http://www.56.com/style/-doc-/v1/tpl/js_dev_spec/spec-comment.html 文件注释 文件注释位于文件的最前面,应包括文件的以下信息:概要说明及版本(必须)项目地址(开源组件必须)版权声明(必须)开源协议(开源组件必须)版本号(必须)修改时间(

Javascript之BOM(window对象)

摘自Rocky Ren 分享到 Javascript之BOM(window对象) ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域

Underscore.js(JavaScript对象操作方法)

Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率.(Underscore还可以被使用在Node.js运行环境.) 在学习Underscore之前,你应该先保存它的API地址,因为你将在以后经常访问它: http://documentcloud.github.com/underscore/ 从API中,你已经可以看出,Underscore没有任何复杂的结构和流程,它仅仅提供了一系列常用的函数.如果你将API中的方法从头至尾用一遍,你就会对它非常了解. 尽管如此,但