BOM中window对象的属性

简介: BOM中window对象的属性这篇博客主要介绍一下BOM中的window对象的属性。HTML代码: <a href="http://www.baidu.com">百度一下</a> <iframe src="" frameborder="1" id="frame1" name="frame_1"></iframe> <iframe src="" frameborder="1" name="frame_2"></iframe> <iframe src="" frameborder="1" name="frame_3"></iframe> <ifra

BOM中window对象的属性




这篇博客主要介绍一下BOM中的window对象的属性。


HTML代码:


<ahref="http://www.baidu.com">百度一下</a><iframesrc=""frameborder="1"id="frame1"name="frame_1"></iframe><iframesrc=""frameborder="1"name="frame_2"></iframe><iframesrc=""frameborder="1"name="frame_3"></iframe><iframesrc=""frameborder="1"name="frame_4"></iframe><divid="wrap"><divid="box"></div></div><divclass="box"></div>

CSS代码:



.box {
            width: 10000px;
            height: 10000px;
        }
        #wrap {
            width: 400px;
            height: 400px;
            background: green;
            position: relative;
        }
        #box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 10px;
            left: 10px;
        }


1.属性值为对象


// 属性值为对象
    // history  对 History 对象的只读引用。
    console.log(window.history);
    // location 用于窗口或框架的 Location 对象。
    console.log(window.location);
    // navigator  对 Navigator 对象的只读引用。
    console.log(window.navigator);
    // screen 对 Screen 对象的只读引用。
    console.log(window.screen);
    // document 对 Document 对象的只读引用。
    console.log(window.document);


2.宽高相关的属性


// 宽高属性
    // innerHeight  返回窗口的文档显示区的高度。
    // innerWidth 返回窗口的文档显示区的宽度。
    console.log(window.innerHeight, window.innerWidth);
    // outerHeight  返回窗口的外部高度,包含工具条与滚动条。
    // outerWidth 返回窗口的外部宽度,包含工具条与滚动条。
    console.log(window.outerHeight, window.outerWidth);
    // clientHeight  返回浏览器窗口的高   兼容IE8一以下浏览器
    // clientWidth  返回浏览器窗口的宽
    console.log(document.body.clientHeight, document.body.clientWidth);
    console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);

3.坐标相关的属性


// pageXOffset  设置或返回当前页面相对于窗口显示区左上角的 X 位置。
    // pageYOffset  设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
    console.log(window.pageXOffset, window.pageYOffset);
    // screenLeft 返回相对于屏幕窗口的x坐标
    // screenTop  返回相对于屏幕窗口的y坐标
    console.log(window.screenLeft, window.screenTop);
    // screenX  返回相对于屏幕窗口的x坐标
    // screenY  返回相对于屏幕窗口的y坐标
    console.log(window.screenX, window.screenY);


4.窗口/框架相关的属性


// 如何获取框架中的元素  contentWindow   contentDocumnet
    console.log(document.getElementById("frame1").contentWindow);
    // self 返回对当前窗口的引用。等价于 Window 属性。
    console.log(window.self);
    // top  返回最顶层的父窗口。
    console.log(window.top);
    console.log(document.getElementById("frame1").contentWindow.top);
    // parent 返回父窗口。
    console.log(window.parent);
    console.log(document.getElementById("frame1").contentWindow.parent);
    // length 设置或返回窗口中的框架数量。
    console.log(window.length);
    // frames 返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。
    console.log(window.frames);
    // name 设置或返回窗口的名称。
    console.log(window.name);
    console.log(document.getElementById("frame1").contentWindow.name);
    // document.οnclick=function(){
    //     newWindow=window.open("http://www.baidu.com","newWindow","width=300,height=300");
    //     console.log(newWindow.name);
    // }
    // closed 返回窗口是否已被关闭。
    // document.οnclick=function(){
    //     newWindow=window.open("http://www.baidu.com","newWindow","width=300,height=300");
    //     console.log(newWindow.closed);
    // }
    // opener 返回对创建此窗口的窗口的引用。
    document.onclick = function() {
        newWindow = window.open("http://www.baidu.com", "newWindow", "width=300,height=300");
        console.log(newWindow.opener);
    }


5.缓存相关的属性


// localStorage 在浏览器中存储 key/value 对。没有过期时间。
    // sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。   会话缓存
    window.sessionStorage.setItem("name","张三");


6.补充知识点


// offsetTop offsetLeft 被操作的元素相对于第一个有定位属性的祖先元素的偏移  没有则相对于body
    var oWrap = document.getElementById("wrap");
    var oBox = document.getElementById("box");
    console.log(oBox.offsetLeft, oBox.offsetTop);
    // offsetParent  第一个具有定位属性的祖先元素  没有的话  返回body 
    console.log(oBox.offsetParent);


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

相关文章
|
6月前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作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对象的其他方法 前两篇博客一直在讲window对象的方法,现在将剩下的其他方法以此进行讲解。 HTML代码: &lt;button&gt;open()&lt;/button&gt; &lt;button&gt;close()&lt;/button&gt; &lt;button&gt;focus()&lt;/button&gt; &lt;button&gt;print()&lt;/button&gt; &lt;br&gt; &lt;button&gt;resizeTo()&lt;/button&gt; &lt;button&gt;resizeBy()&lt;/button&gt; &lt;button&gt;moveTo()&lt;/button&gt; &lt;button&gt;mo
|
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中Navigator对象
简单解析BOM中Navigator对象 navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.log(navigator.appVersion); // cookieEna
|
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 前端开发
简单认识JavaScript的BOM对象
简单认识JavaScript的BOM对象 前面JavaScript中DOM的学习基本已经结束了。今天开始我们学习一下JavaScript中的BOM。 BOM(浏览器对象模型) Browser Object Model 所有有的浏览器都支持window对象, 浏览器的窗口 window对象是js的最高级 / 顶级对象。 所有js的全局对象, 变量, 函数 自动变成window对象的成员 全局变量相当于window对象的属性。 全局函数相当于window对象的方法。 a = 10; console.log(window.a);/
|
JavaScript 前端开发 UED
BOM常见方法
BOM常见的方法 window对象常见的事件 窗口加载事件onload