BOM中window对象的其他方法

简介: 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>mo

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 编码的字符串。

视频讲解链接:
https://www.bilibili.com/video/BV1Ep4y1D77E/

相关文章
|
7月前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
|
JavaScript 前端开发
函数 DOM BOM
函数 DOM BOM
函数 DOM BOM
|
XML JavaScript API
DOM,BOM,window的区别
DOM,BOM,window的区别
|
JavaScript 前端开发 开发者
JavaScript—BOM的相关对象。
BOM即浏览器对象模型(browserobjectmodel),其提供了一系列接口供开发者使用JavaScript与浏览器窗口进行交互。BOM没有自己的标准,在浏览器中window对象就是BOM相关内容的入口。
JavaScript—BOM的相关对象。
|
JavaScript
|
缓存 JavaScript 前端开发
BOM中window对象的属性
BOM中window对象的属性 这篇博客主要介绍一下BOM中的window对象的属性。 HTML代码: &lt;a href=&quot;http://www.baidu.com&quot;&gt;百度一下&lt;/a&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; id=&quot;frame1&quot; name=&quot;frame_1&quot;&gt;&lt;/iframe&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; name=&quot;frame_2&quot;&gt;&lt;/iframe&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; name=&quot;frame_3&quot;&gt;&lt;/iframe&gt; &lt;ifra
|
消息中间件 JavaScript 前端开发
【JavaScript-BOM】this指向,同步异步问题
【JavaScript-BOM】this指向,同步异步问题
113 0
【JavaScript-BOM】this指向,同步异步问题
|
JavaScript
BOM中window对象的方法之弹窗
BOM中window对象的方法之弹窗 之前介绍了window对象的属性,接下来说一说window对象的方法。当然方法有好些,这里主要讲一下window对象的弹窗方法。 // alert() 显示带有一段消息和一个确认按钮的警告框。 window.alert(&quot;这是是一个警告框&quot;); // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 返回值 true false var sure=window.confirm(&quot;确认要离开吗?&quot;); console.log(sure); // prompt(&quot;提示文本&quot;
|
JavaScript
BOM中window对象的方法之计时器
BOM中window对象的方法之计时器 前面讲到了window对象的弹窗方法,现在来讲一下计时器方法。 // setInterval(function(){},time,参数,参数) 按照指定的周期(以毫秒计)来调用函数或计算表达式。 var i=0; var timer=setInterval(function(){ i++; console.log(i); }, 1000); // clearInterval(定时器的名称) 取消由 setInterval() 设置的 timeout。 document.
|
JavaScript
简单解析BOM中Navigator对象
简单解析BOM中Navigator对象 navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.log(navigator.appVersion); // cookieEna