BOM中window对象的其他方法
前两篇博客一直在讲window对象的方法,现在将剩下的其他方法以此进行讲解。
HTML代码:
<button>open()</button><button>close()</button><button>focus()</button><button>print()</button><br><button>resizeTo()</button><button>resizeBy()</button><button>moveTo()</button><button>moveBy()</button><button>scrollTo()</button><button>scrollBy()</button>
CSS代码:
body{ height: 2000px; width: 2000px; }
JS代码:
// 05window对象其他的方法 var aBtns = document.getElementsByTagName("button"); // open(URL,target,"width=100,height=100") 打开一个新的浏览器窗口或查找一个已命名的窗口。 默认在新窗口打开 aBtns[0].onclick = function () { // newWindow = window.open("01简单认识BOM.html", "_blank", "width=300,height=300"); newWindow = window.open("", "_blank", "width=300,height=300"); newWindow.focus(); } // close() 关闭浏览器窗口。 只能关闭通过open()方法打开的网页 aBtns[1].onclick = function () { newWindow.close(); } // stop() 停止页面载入。 图片 // blur() 把键盘焦点从顶层窗口移开。 // focus() 把键盘焦点给予一个窗口。 aBtns[2].onclick = function () { newWindow.focus(); } // print() 打印当前窗口的内容。 aBtns[3].onclick = function () { window.print(); } // 针对open()方法打开窗口 不可以含有一个以上的Tab // resizeTo(width,height) 把窗口的大小调整到指定的宽度和高度。 aBtns[4].onclick = function () { newWindow.resizeTo(500, 500); } // resizeBy() 按照指定的像素调整窗口的大小。 aBtns[5].onclick = function () { newWindow.resizeBy(-100,-100); } // moveTo() 把窗口的左上角移动到一个指定的坐标。 aBtns[6].onclick = function () { newWindow.moveTo(100,100); } // moveBy() 可相对窗口的当前坐标把它移动指定的像素。 aBtns[7].onclick = function () { newWindow.moveBy(100,100); } // 滚动条 // scrollTo() 把内容滚动到指定的坐标。 aBtns[8].onclick = function () { window.scrollTo(100,100); } // scrollBy() 按照指定的像素值来滚动内容。 aBtns[9].onclick = function () { window.scrollBy(100,100); } // createPopup() 创建一个 pop-up 窗口。 // getSelection() 返回一个 Selection 对象,表示用户选择的文本范围或光标的当前位置。 // getComputedStyle() 获取指定元素的 CSS 样式。 // matchMedia() 该方法用来检查 media query 语句,它返回一个 MediaQueryList对象。 // atob() 解码一个 base-64 编码的字符串。 // btoa() 创建一个 base-64 编码的字符串。