浏览器对象模型 BOM

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

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性

Window 对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

Window 尺寸

浏览器的视口,不包括工具栏和滚动条。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度 
window.innerWidth - 浏览器窗口的内部宽度 

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight 
document.documentElement.clientWidth 

或者

document.body.clientHeight 
document.body.clientWidth 

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

History 对象属性:

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

History 对象方法:

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。 

例子:

history.back()//执行的操作与单击后退按钮执行的操作一样
history.go(-2)//执行的操作与单击两次后退按钮执行的操作一样

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象属性:

href 设置或返回完整的 URL。 

Location 对象方法:

assign() 加载新的文档。 
reload() 重新加载当前文档。 
replace() 用新的文档替换当前文档。 

Window 对象方法

alert() 显示带有一段消息和一个确认按钮的警告框。

blur() 把键盘焦点从顶层窗口移开。

close() 关闭浏览器窗口。

focus() 把键盘焦点给予一个窗口。

moveBy() 可相对窗口的当前坐标把它移动指定的像素。

moveTo() 把窗口的左上角移动到一个指定的坐标。

示例:

window.moveTo(50,50);

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

示例:

var a=window.open('','','width=200,height=100');

prompt() 显示可提示用户输入的对话框。

resizeBy() 按照指定的像素调整窗口的大小。

resizeTo() 把窗口的大小调整到指定的宽度和高度。

scrollBy() 按照指定的像素值来滚动内容。

示例:

function fn2(){
scrollBy(0,200);//可以用它来滚动到指定内容
  }

scrollTo() 把内容滚动到指定的坐标。

示例:

function fn1(){
scrollTo(0,0);//可以用它来回到顶部
  }

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

示例

 function show()
{
alert('a');
}
setInterval(show, 1000);

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

示例

timer=setTimeout("fn3()",100);

clearInterval() 取消由 setInterval() 设置的 timeout。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

示例

clearTimeout(timer);

posted on 2016-05-15 13:55  一语天堂  阅读(130)  评论(0编辑  收藏  举报

导航