Javascript学习笔记6——BOM

时间:2022-12-26 13:46:01

BOM的核心是window,可以引用全局变量。

例如在js文件中:

var age=20;

function say()

{

alert("hello");

}

window可以这样直接调用。

window.age或者window.say()


通过window来获取浏览器窗口相对于屏幕的位置。

可以使用screenX和screenY或者screenLeft和screenTop来获取。其中在不同的浏览器中所兼容的两者也不一样。sarafi和chrome同时支持这两种属性获取方式。

移动窗口方法:

window.moveBy(20,20)//表示将窗口向下向右移动20,20像素的屏幕区域。

window.moveTo(20,20)//表示移动到屏幕20,20 的屏幕区域。

这两个方法可能会被浏览器禁用(笔者实验的时候没有成功,浏览器为chrome)


窗口大小的表示方法:

innerWidth innerHeight

outerWidth outerHeight

在chrome中两者都表示视口大小,而不是窗口的大小。


调整窗口的大小

window.resizeTo(100,100)//吧窗口的大小调整为100,100

window.resizeBy(500,30)//接受新的调整大小幅度,将现有的窗口高度增加为600,130.

这两个方法在chrome中无法使用。


导航和打开窗口:

window.open()方法打开一个新的窗口,也可以导航到特定的链接。这个方法接受四个参数,要加载的url,窗口目标,特性字符串,新页面是否取代现有历史纪录的布尔值。

window.open("www.baidu.com",”newwin“)//打开一个链接,第二个参数用来表示在哪里打开这个链接,如果有个有个窗口或者框架叫newwin,就用这个窗口或者框架打开,如果没有的话就新建一个窗口打开,此外窗口也可以是_self,_blank,_parent,_top的特殊的窗口名称。

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在*框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。


弹出窗口:

如果第二个参数没有制定的标签页或者窗口,那么浏览器自动的创建一个以第二个参数命名的窗口或者标签页。如果没有传递第三个参数,那么新的链接在标签页中打开,如果参数了第三个参数那么就可以以指定的属性来新建一个窗口,窗口的属性就是第三个参数中的内容。

常见的第三个参数的设置窗口的内容:

height,width,top,left

location:表示是否在浏览器窗口中打开地址栏,布尔类型

memubar:表示是否打开菜单栏。

resizeable:表示是否可以拖动窗口改变大小。

status:表示是否显示状态栏

toolbar:表示是否显示工具栏。

在弹出窗口之前可以设置窗口弹出的位置,即利用window.open()方法返回的值进行设置moveby属性。

var fuck=window.open("www.baidu.com","fuck","height=200,width=300,left=40,top=30")

fuck.moveto(300,300)


间歇调用与超时调用

超时调用可以使用settimeout()方法,接受两个参数,一个是要执行的代码,一个是等待的时间。

例如:

setTimeOut(function(){alert("LLLL")},200)

对于要执行的代码尽量不要使用字符串来表示。

第二个参数表示要执行的代码需要等待的时间,时间到了也不一定要执行。在javascript是一个单线程序的解释器,因此一定时间内只执行一段代码,为了控制要执行的代码,就需要一个任务队列,这些要执行的代码按照他们添加到队列的时间来执行。而第二个参数就是等多长时间吧任务添加到队列。如果队列是空的,那么添加到队列后会立即执行,如果不为空需要等待前面的任务执行完了在执行。

而要执行的代码就是所谓的执行计划,如果要终止一个执行计划于尚未执行的时候,就需要一个方法clearTimeOut(),改方法参数为setTimeOuts的返回值,即执行计划的ID。

var execID=setTimeOut("alert('fuck')",3000)

clearTimeOut(execID);


间歇调用使用方法为setInterval(),使用到的参数和setTimeOut一样。同样它也返回一个ID,也可以使用clearInterval()方法来终止间歇调用,其意义大于终止超时调用,因为间歇调用的方法一直执行到页面卸载。


系统对话框:

alert(),confirm(),Prompt()

alert()作用就是用来弹出相应的警告和信息。

confirm()用来确定一些东西,返回true和false

if(confirm("Are you sure"))

{

alert("You are agree")

}

else

{

alert("You Object it")

}

prompt()用来接受输入的信息,

prompt("Please input your name","John")//第一个参数用来提示,第二个参数是默认值。

var result=prompt("please input your age","23")


window.print()用来打印页面为pdf格式。


location对象:返回当前文档的加载的信息,还有一些导航的功能。

location是一个特殊的对象,它既是window也是document的对象,所以window.location与document.location的功能是一样的。

常见属性:

host:返回例子“www.baidu.com:9080”如果没有端口的话就只返回服务器名称

hostname:返回www.sohu.com

port:返回8080

pathname:返回url的目录名。

search:返回url查询,以?开始往后的内容。例如“?q=fuck”



history对象:

history.go()属性可以在用户的历史纪录中任意跳转,

history.go(-1)或者history.go(2)

history.go("www.badiu.com")//跳转到最近的历史纪录中的www.baidu.com页面中。