浏览器对象模型BOM小结

Posted 2020-08-07 骑猪敲代码

概念

BOM (Browser Object Model) 浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象

BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

BOM缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C,

BOM最初是Netscape浏览器标准的一部分；

window对象 是浏览器中的Global对象

窗口设置 (打开、大小、位置)

间歇调用与超时调用

对话框 (提示框、确认框、输入框)

location对象 (位置对象包含各种属性和方法)

navigator对象 用于提供用户浏览器的相关信息

screen对象 包含有关用户屏幕的信息

history对象 包含有关用户的访问历史记录

打开新窗口

 

window.open(URL,name,specs);

URL：打开页面的URL，没有指定URL将打开新的空白窗口

name：

     _blank 新窗口打开，默认

     _self 当前页面打开

     name 窗口名称 ......

specs：一个逗号分隔的项目列表。支持以下值：

     height=pixels 窗口的高度，最小值为100

     width=pixels 窗口的宽度，最小值为100

     left=pixels top=pixels ......

     示例 window.open(\'\',\'\',\'width=200,height=200\');

关闭窗口

window.close() 方法用于关闭浏览器窗口

(DOM window对象的方法)

close() 方法将关闭有 window 指定的顶层浏览器窗口。

某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。

这阻止了恶意的脚本终止用户的浏览器。

窗口大小

 

调整窗口大小 window.resizeTo(width,height);

调整窗口大小 window.resizeBy(width,height);

窗口位置

 

window.screenLeft属性返回窗口相对于屏幕的X坐标

window.screenTop属性返回窗口相对于屏幕的Y坐标

window.screenX属性返回窗口相对于屏幕的X坐标

window.screenY属性返回窗口相对于屏幕的Y坐标

窗口可视区尺寸

document.documentElement.clientWidth //offset 获取的是整个文档的高度

document.body.clientWidth

document.documentElement.clientHeight

document.body.clientHeight

窗口垂直滚动条

document.body.scrollTop

document.documentElement.scrollTop

间歇调用

setInterval ( 函数/名称 , 毫秒数 )

表示每经过一定的毫秒后，执行一次相应的函数(重复)

超时调用

setTimeout ( 函数/名称 , 毫秒数 )

表示经过一定的毫秒后，只执行一次相应的函数(不重复)

清除计时器：clearInterval( ); clearTimeout( );

 

提示框 alert (“ ”);

用户必须先关闭该消息框然后才能继续进行操作

确认框 confirm(“ ”);

confirm(“需要确认的内容”);

选择“确定”返回true 选择“取消”返回false

输入框 prompt(“ ”,“ ”);

prompt(“对话框中显示的文本”,"默认的输入文本");

单击取消按钮，则返回 null 单击确认按钮，则返回输入的文本

location对象 包含有关当前页面的URL信息

属性：

    host 设置或返回主机名和当前 URL 的端口号。

    port 设置或返回当前 URL 的端口号。

    href 设置或返回完整的 URL。 ……

方法：

    assign() 加载新的文档。

    reload() 重新加载当前文档。

    replace() 用新的文档替换当前文档。

navigator对象部分属性

appCodeName 返回浏览器的代码名。

appName 返回浏览器的名称。

cookieEnabled 返回指明浏览器中是否启用cookie的布尔值。

platform 返回运行浏览器的操作系统平台。

appVersion 返回浏览器的平台和版本信息。

userAgent 返回由客户机发送服务器的user-agent头部的值。

用户浏览器识别码

var str=window.navigator.userAgent;

var str=window.navigator.appVersion;

大小写转换

str.toLowerLocalCase( ); 转换成小写

str.toUpperLocalCase( ); 转换成大写

indexOf( )方法

可返回某个指定的字符串值在字符串中首次出现的位置

语法：string.indexOf(str,index);

参数：str-------规定需检索的字符串值

         index----规定在字符串中开始检索的位置

注意：indexOf( ) 方法对大小写敏感 如果要检索的字符串值没有出现，则该方法返回 -1

screen 对象包含有关客户端显示屏幕的信息

width 返回显示器屏幕的宽度。

height 返回显示器屏幕的高度。

availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

history 对象包含用户在浏览器中访问过的URL

length 返回浏览器历史列表中的 URL 数量。

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

history.go(-1) 后退一页

history.go(1) 前进一页

http://www.cnblogs.com/paulirish/ 大家可以去这个博客看一下，里面有操作代码；