2-Bom

前言

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象

例如下面两行代码是一样的:

 document.write("BOM");
 window.document.write("BOM");

Screen 对象

属性

Screen 对象包含有关客户端显示屏幕的信息,直接调用其内置属性即可获得。

<script type="text/javascript">
    document.write("显示屏幕的宽高: ");
    document.write(screen.width + "*" + screen.height);document.write("<br />")
    document.write("显示屏幕的宽高 (除 Windows 任务栏之外): ")
    document.write(screen.availWidth + "*" +screen.availHeight+"<br/>")
    document.write("返回显示屏幕的颜色分辨率(比特每像素):")
    document.write(screen.pixelDepth)
    //其实还有其它几种属性,但是由于大多数设备都不支持,就不需要会了
</script>

History 对象

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History 对象包含用户(在浏览器窗口中)访问过的 URL。

属性

length:声明了浏览器历史列表中的元素数量。

<script type="text/javascript">
    alert(history.length);
</script>

方法

back():方法可加载历史列表中的前一个 URL(如果存在)。

<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <input type="button" value="Back" onclick="goBack()" />
        <script type="text/javascript">
            function goBack(){history.back()}//相当于点击后退按钮或调用history.go(-1)
        </script>
    </body>
</html>    

forward(): 方法可加载历史列表中的下一个 URL。

<script type="text/javascript">
    history.forward()//相当于点击后退按钮或调用 history.go(1)
</script>

go():方法可加载历史列表中的某个具体的页面。

<script type="text/javascript">
    history.go(number|URL)
    //URL 参数使用的是要访问的 URL,或 URL 的子串。
    //而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
</script>

Navigator 对象

Navigator 对象包含有关浏览器的信息。

属性

<script type="text/javascript">
    var x = navigator;
    document.write("浏览器代码名:" + x.appCodeName+"<br />");
    document.write("浏览器名称:" + x.appName+"<br />");
    document.write("浏览器的平台和版本信息:" + x.appVersion+"<br />");
    document.write("是否启用 cooki:" + x.cookieEnabled+"<br />");
    document.write("是否处于脱机模式:" + x.onLine+"<br />");
    document.write("浏览器的操作系统平台:" + x.platform+"<br />");
    document.write("客户机发送服务器的 user-agent 头部的值,即UA:" + x.userAgent);
   //其实还有其它几种属性,但是由于大多数设备都不支持,就不需要会了
</script>

方法

javaEnabled() 方法可返回一个布尔值,该值指示浏览器是否支持并启用了 Java。如果是,则返回 true,否则返回 false。

<script type="text/javascript">
    console.log(navigator.javaEnabled())
</script>
//另一个方法不灵,也不常用,就不需要会了

Location对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

属性

href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。
也可以通过为该属性设置新的 URL,跳转。

<script type="text/javascript">
    location.href="http://www.baidu.com";//写入:跳转
    console.log(location.href)//读取
</script>

其它属性

<script type="text/javascript">
    //假设当前的 URL 是: http://www.example.com/go/?=userfile&a=index/test.htm#part1
    console.log(location.search)//读取从问号 ? 开始的 URL(查询部分):?=userfile&a=index/test.htm#part1
    console.log(location.hash)//读取从问号 # 开始的 URL(跳转锚部分):#part1
    console.log(location.pathname)//读取或设置当前 URL 的路径部分:go/?=userfile&a=index/test.htm#part1
    console.log(location.hostname)//读取当前 URL 的主机名:www.example.com
    console.log(location.protocol)//读取当前 URL 的协议:http:
    //还有个读取当前URL的端口号port,和读取当前URL的主机+端口号的host。但端口号不灵,就不要会了
</script>

方法:两个方法

<script type="text/javascript">
    //打开新页面
        location.assign(‘http://www.example.com‘)
        //等价于 location.href=‘http://www.example.com‘。区别是:一个是属性、一个是方法,功能效果完全一样
        //作用是:加载新的文档 即打开新页面
        location.replace(‘http://www.example.com‘)
        //与前两者的区别是,在replace之后,浏览历史就被清空了(href与assign方法会产生历史记录)
        //【建议】用replace。因前两者会产生历史记录,而浏览者如果点‘后退’按钮,就会产生‘redirection loop‘,会被浏览器禁止。
    //刷新当前页面
        location.reload()
</script>

Window对象

菜鸟教程参考:http://www.runoob.com/jsref/obj-window.html
W3c教程参考:http://www.w3school.com.cn/jsref/dom_obj_window.asp
我们一开始的时候就说了,Bom其它对象都是由顶层对象window派生而来。而上边我们也介绍了那些派生而来的对象。这些对象又是Window对象的属性
那么我们下边就说说window对象其它的属性。圈起来的就不说了,上边已经说过了。Document我们会再后边单独讲

属性

窗口宽高属性

<script type="text/javascript">
        console.log("【网页内容大小】窗口净宽高:"+window.innerHeight+"*"+window.innerWidth);
        console.log("【浏览器窗口大小】包含窗口的外部高度,如工具条与滚动条共宽高:"+window.outerHeight+"*"+window.outerWidth)
</script>
时间: 2024-08-26 13:06:04

2-Bom的相关文章

诡异的json包含bom头

今日项目碰到 bom头跑错 Exception in thread "main" com.fasterxml.jackson.core.JsonParseException: Unexpected character ('' (code 65279 / 0xfeff)): expected a valid value (number, String, array, object, 'true', 'false' or 'null') at [Source: {"state&q

BOM

Q:BOM是什么? A:"浏览器对象模型".是Web中使用JS的核心.(而ECMAScript是JavaScript的核心). Q:window对象与全局变量有差别吗? A:全局变量不能通过delete操作符删除,而直接在windows对象上的定义的属性可以. var age = 29; window.color = "red"; delete window.age; //age不是全局变量,false delete window.color; //true ale

DOM_04之常用对象及BOM

1.添加:①var a=document.createElement("a"):②设置关键属性:③将元素添加到DOM树:a.parent.appendChild(a):b.parent.insertBefore(a,old):c.parent.replaceChlid(a,old): 2.优化:尽量少的操作DOM树,①如果同时添加父元素与子元素,应在内存中先将子元素拼到父元素下,再将父元素添加到DOM树:②如果添加多个平级子元素,应先将所有子元素放入文档片段,再将文档片段一次性添加到D

关于JSON解析的深坑之BOM头

    前言:在我们对Json字符串进行处理时,往往会碰到这个问题org.json.JSONException: Value of type java.lang.String cannot be converted to JSONObject,解析服务器返回的Json串时,JSONObject对象抛出了这个异常.其实这是返回的Json字符串含有BOM头导致的. 本人手拙,写的不好.望各位大虾见谅!!! 什么是JSON?  JSON(JavaScript Object Notation) 是一种轻

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout

BOM和DOM自己的一些小观点和认识

BOM主要针对的是浏览器的操作,常用的也就是五个对象:window对象 location对象 navigation对象 screen对象和history对象 window对象主要讲的就是对浏览器的一些操作,有一些常用的方法,比如alert comfirm prompt方法. location对象英文翻译过来就是位置对象,那么顾名思义就是对位置和偏移量之间的操作. navigation对象就好像一个导航的东西,告诉你一些URL里面的知识,和获取浏览器当前页面完整URL的一些信息. screen就是

xpages开发的bom管理系统

domino对流程设计是方便的,如果制作复杂逻辑的应用就难了,但是还是可以实现的,以前的一个bom管理系统,刚开始想使用java的ssh来做,后来为了统一平台,还是使用domino来做,经过长时间的研究终于出来了,这是使用xpages来做的,当然使用domino的form来做同样没有问题的,因为数据结构一样的,思路差不多,由于使用xpags已经久了,就不再使用form的web来做了.以下是界面,分享一下,以便给大家信心!

JSONP / DOM / BOM 部分总结

#JSONP 跨域请求 JSONP原理:通过动态创建script标签,利用其scr跨域的属性,访问其他域的服务器,请求数据并通过回调函数返回请求的结果 20:26 2017/7/13 突然发现在记事本按F5可以自动写出当前日期和时间,美滋滋 1.递归函数应该始终使用arguments.callee来递归的调用自身. 不要使用函数名 (函数名可能会发生变化)2.匿名函数 也叫 拉姆达函数3.关于闭包的作用域: 闭包的作用域链包含着它自己的作用域. 包含函数的作用域和全局作用域 通常,函数的作用域及

ALVtree 显示BOM结构

REPORT  z_barry_alv_tree1_bom MESSAGE-ID oo. TABLES: stpox.INCLUDE <icon>. CLASS: cl_gui_column_tree DEFINITION LOAD,       cl_gui_cfw DEFINITION LOAD . DATA: tree1  TYPE REF TO cl_gui_alv_tree ,      mr_toolbar TYPE REF TO cl_gui_toolbar . DATA: gs

BOM之history对象

前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor