Javascript BOM学习小结(六)_javascript技巧
所谓的BOM即浏览器对象模型(Browser Object Model)。BOM赋予了JS操作浏览器的能力,即window操作。DOM则用于创建删除节点,操作HTML文档。BOM尚无正式的标准,导致各浏览器对于BOM方法的支持各有不同,因此需要具体问题具体对待。
2、window对象。
window对象是BOM的核心,window对象指当前的浏览器窗口。所有JS全局对象、函数以及变量都属于window对象。全局变量是window对象的属性。全局函数是window对象的方法。甚至DOM的document也属于window对象的属性之一,只是大多数情况下可以忽略不写。
window对象方法:
3、窗口操作。
(1)、打开窗口。
open() 方法可用于打开新窗口。
语法:window.open(url, name/target, 窗口设置, replace)
该方法的三个参数都是可选的,默认在新页面打开一个空白页。第一个参数可设置要打开窗口的路径。第二个参数规定在何处打开新窗口,也可用于指定窗口的名称。第三个参数设置窗口参数,多个参数可用逗号分隔。如果有第一个参数,后面两个参数可省略,则在新页面打开。第二个参数一般无需设置,如果要规定窗口的参数,则必须有第二个参数,必须为'_blank',或者用'',代替,并且距离屏幕顶部不能为0,否则失效,如果设置了左边距离,顶部可设置为0。最后一个参数规定加载到窗口的URL是在窗口的浏览历史中创建一个条目,还是替换浏览器历史中的当前条目,值为true或false, 值为true时URL替换浏览历史中的当前条目,为false时URL在浏览历史中创建新的条目。
下表是一些常用的窗口设置参数:
实例:点击按钮,在新窗口打开百度首页,宽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.[属性|方法]
上一篇: 从另一个角度看渐变的
推荐阅读
-
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
-
深入学习JavaScript中的bom
-
每个程序员都需要学习 JavaScript 的7个理由小结
-
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
-
ppk on javascript 笔记(六)--BOM
-
更快学习 JavaScript 的 6 个思维技巧
-
JavaScript的初步学习,JS的数据类型与变量,函数,DOM操纵HTML,BOM操作浏览器
-
JavaScript 反射学习技巧
-
克隆javascript对象的三个方法小结_javascript技巧
-
javascript算法学习实现代码_javascript技巧