欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Javascript BOM学习小结(六)_javascript技巧

程序员文章站 2022-04-30 21:16:14
...
1、BOM简介。

  所谓的BOM即浏览器对象模型(Browser Object Model)。BOM赋予了JS操作浏览器的能力,即window操作。DOM则用于创建删除节点,操作HTML文档。BOM尚无正式的标准,导致各浏览器对于BOM方法的支持各有不同,因此需要具体问题具体对待。

2、window对象。

  window对象是BOM的核心,window对象指当前的浏览器窗口。所有JS全局对象、函数以及变量都属于window对象。全局变量是window对象的属性。全局函数是window对象的方法。甚至DOM的document也属于window对象的属性之一,只是大多数情况下可以忽略不写。

  window对象方法:  Javascript BOM学习小结(六)_javascript技巧

3、窗口操作。

  (1)、打开窗口。

  open() 方法可用于打开新窗口。

  语法:window.open(url, name/target, 窗口设置, replace)

  该方法的三个参数都是可选的,默认在新页面打开一个空白页。第一个参数可设置要打开窗口的路径。第二个参数规定在何处打开新窗口,也可用于指定窗口的名称。第三个参数设置窗口参数,多个参数可用逗号分隔。如果有第一个参数,后面两个参数可省略,则在新页面打开。第二个参数一般无需设置,如果要规定窗口的参数,则必须有第二个参数,必须为'_blank',或者用'',代替,并且距离屏幕顶部不能为0,否则失效,如果设置了左边距离,顶部可设置为0。最后一个参数规定加载到窗口的URL是在窗口的浏览历史中创建一个条目,还是替换浏览器历史中的当前条目,值为true或false, 值为true时URL替换浏览历史中的当前条目,为false时URL在浏览历史中创建新的条目。

  下表是一些常用的窗口设置参数:

Javascript BOM学习小结(六)_javascript技巧

  实例:点击按钮,在新窗口打开百度首页,宽600,高400,距屏顶0像素,屏左10像素。

 
 

  该实例在IE下并不会打开一个自定义的窗口,而是新打开一个标签页。

  如果在脚本中直接打开新窗口,在Chrome和FF下会被当作广告弹窗直接拦截,但是在IE下可以正常显示。360浏览器的极速模式使用的是Chrome的内核,兼容模式则使用的IE内核,360浏览器使用人群相对较多,这里就不描述了,只要其余浏览器正常运行,他就没什么问题。

 

  实例:获得焦点和失去焦点

 
 

  实例:返回新打开窗口的名称

 
 

  实例:打开新窗口向父窗口传递信息

 
 

  实例:指定窗口大小、移动窗口和滚动内容

 
 
 JavaScript实例

用指定像素调整窗口大小:

将窗口的大小调整到指定的宽度和高度:

相对于当前位置移动新窗口:

移动新窗口到指定位置:

由指定的像素数滚动内容:滚动到指定内容处:





  方法解析:

  resizeBy(w, h):根据指定的像素来调整窗口的大小。该方法定义指定窗口的右下角移动的像素,左上角将不会被移动(它停留在其原来的坐标)。

  该方法有两个参数,第一个参数是必需的,指定窗口宽度增加的像素数。第二个参数可选,指定窗口高度增加的像素数。两个参数可为正数,也可为负数。

  resizeTo(w, h):用于把窗口大小调整为指定的宽度和高度。

  该方法两个参数都是必需的,用来指定设置窗口的宽度和高度,以像素计。

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

  该方法有两个参数,第一个参数指定要把窗口右移的像素数,第二个参数指定要把窗口下移的像素数。

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

  该方法有两个参数,第一个参数指定窗口新位置的 x 坐标,第二个参数指定窗口新位置的 y 坐标。

  scrollBy(xnum, ynum):可把内容滚动指定的像素数。

  该方法有两个必需参数,第一个参数指定把文档向右滚动的像素数。第二个参数指定把文档向下滚动的像素数。

  scrollTo(x, y):可把内容滚动到指定的坐标。

  该方法有两个必需参数,第一个指定要在窗口文档显示区左上角显示的文档的 x 坐标。第二个参数指定要在窗口文档显示区左上角显示的文档的 y 坐标。

  实例:打印当前页面

 
 

  (2)、关闭窗口。

  window.close()方法可用于关闭当前窗口。

 //点击按钮关闭当前窗口
 

  该方法在Chrome下运行正常。IE下弹窗提示:你查看的网页正在试图关闭选项卡,是否关闭选项卡?点击否,不关闭,点击是,关闭窗口。在FF下会报错。因为在FF下不允许脚本关闭非脚本打开的窗口,也就是不能关闭一个用户自己打开的窗口,只能关闭由open打开的窗口。所以可以先用open打开,再关闭,这样就能解决FF下不能关闭的问题。这就需要创建两个文档来演示该问题:第二个文档使用上面实例保存为close.html,第一个文档如下:

 //先用open打开保存的文档,然后再点击关闭窗口按钮,效果就达到了
 

  FF浏览器的安全机制比较高,不能关闭用户打开的窗口,在网上也没找有找到什么好的办法,只能修改浏览器的默认配置,显然这是不可取的。上面的办法比较笨,另辟蹊跷不能关闭用户打开的,那就自己open一个再close,但这还是比较实在的方法,至少目的是达到了。

  在IE下可使用下面的代码关闭当前窗口,不弹窗提示。同时也适用于Chrome。这里使用a标签在FF下可以看到报错,使用按钮则没有报错信息。

  实例:关闭新打开的窗口

 
 

  实例:检查新窗口是否已关闭


 


4、浏览器信息。

  window.navigator对象获取包含有关访问者浏览器的信息。该属性在使用时可以不加window前缀。


 
 

  其中最常用的属性是navigator.userAgent,返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串),是识别浏览器的关键,可用于获取当前浏览器版本信息,判断浏览器的类型。

 

  实例:简单的判断浏览器类型


5、页面地址

  window.location对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面,简单说就是可以给赋值,像使用open一样。

  语法:location.[属性|方法]