React.js学习笔记(15) window对象 + ( el

作者: woow_wu7 | 来源:发表于2018-01-08 00:43 被阅读94次

(一) window对象

(1) 概述

在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。

window对象，w是小写
window对象，是所以对象的顶层对象
顶层对象：指的是最高一层的对象，所有其他对象都是它的下属。
JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

全局变量，window对象属性


var a = 1;
window.a // 1


上面代码中，变量a是一个全局变量，但是实质上它是window对象的属性。

声明一个全局变量，就是为window对象的同名属性赋值。

(2) window对象的属性

(1) window.window

window对象的window属性指向自身。


window.window === this // true

(2) window.name

window.name属性用于设置当前浏览器窗口的名字。

与<iframe>窗口通信时，非常有用。

(3) window.location

window.location返回一个location对象，用于获取窗口当前的URL信息。它等同于document.location对象

window.location返回一个 location 对象
location对象包含了当前窗口的 URL 信息


window.location === document.location // true

window.location对象 = document.location对象

(4) window.closed

window.closed属性返回一个布尔值，表示窗口是否关闭。

window.closed 这个属性一般用来检查，使用脚本打开的新窗口是否关闭。

var x = window.open();

x.closed    // false

if (x != null && !x.closed ){
    console.log('如果不等于null并且没有关闭，则输出窗口仍然打开着')
}

(5) window.opener

window.opener属性返回打开当前窗口的父窗口。如果当前窗口没有父窗口，则返回null。

window.opener属性返回打开当前窗口的父窗口
通过opener属性，可以获得父窗口的的全局变量和方法

(6) window.screenX属性，window.screenY属性

window.screenX，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离
window.screenY，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的垂直距离

(7) window.innerHeight，window.innerWidth

window.innerHeight属性，返回 ( 网页 ) 在当前窗口中可见部分的 ( 高度 ) ，即“视口”（viewport），单位为像素
window.innerWidth属性，返回 ( 网页 ) 在当前窗口中可见部分的 ( 宽度 ) ，即“视口”（viewport），单位为像素
注意，这两个属性值包括滚动条的高度和宽度。

(8) window.outerHeight，window.outerWidth

window.outerHeight属性返回 ( 浏览器窗口的高度 )，包括浏览器菜单和边框，单位为像素。
window.outerWidth属性返回 ( 浏览器窗口的宽度 )，包括浏览器菜单和边框，单位为像素。

(9) window.pageXOffset，window.pageYOffset

( 注意 )：----------------------------是只读属性
因为是只读，所以不带参数。
window.pageXOffset属性返回页面的水平滚动距离，单位都为像素。
window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。
如果用户向下拉动了垂直滚动条75像素，那么window.pageYOffset就是75。用户水平向右拉动水平滚动条200像素，window.pageXOffset就是200。

window.innerWidth，window.outerWidth，window.screenX，window.pageXOffset

(3) window对象的方法

(1) window.scrollTo()--------滚动到

window.scrollTo方法用于将网页 ( 滚动到 ) 文档中的某个坐标。

它的参数是相对于整张网页的横坐标和纵坐标。
window.scrollTo(x-coord,y-coord )滚动到文档中的某个坐标。
x-coord 是文档中的横轴坐标。
y-coord 是文档中的纵轴坐标。
该函数和 window.scroll是一样的。

(2) window.scrollBy()--------滚动了，有正负

window.scrollBy方法用于将网页移动指定距离，单位为像素。它接受两个参数：向右滚动的像素，向下滚动的像素。

注意参数有正负 ( 例如：window.scrollBy(-10,-10)表示上移动10px，向左移动10px )

(3) window.open()

window.open方法用于新建另一个浏览器窗口，并且返回该窗口对象。

open方法一共可以接受四个参数。
第一个参数：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
第二个参数：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则跳到该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。
第三个参数：字符串，内容为逗号分隔的键值对，表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整UI的新窗口。
第四个参数：布尔值，表示第一个参数指定的网址，是否应该替换history对象之中的当前网址记录，默认值为false。显然，这个参数只有在第二个参数指向已经存在的窗口时，才有意义


window.open('baidu.html');

// http://localhost:3000/baidu.html

上面代码会让浏览器弹出一个新建窗口，网址是当前域名下的baidu.html。



--------------------------------------------

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);


上面代码表示，打开的新窗口高度和宽度都为200像素，没有地址栏，有状态栏，允许用户调整大小，有滚动条

(4) window.close()

window.close方法用于关闭当前窗口，一般用来关闭window.open方法新建的窗口。

该方法只对顶层窗口有效，iframe框架之中的窗口使用该方法无效。

var a = window.open('baidu.html','baidu');

a.close()

//关闭a窗口

(二) element对象盒模型属性

(1) Element.clientHeight，Element.clientWidth

-------------------可见部分宽高度-------------------

--------Element.clientHeight--------只包括padding

--------Element.offsetHeight--------包括padding，border，滚动条

Element.clientHeight属性返回元素节点 (可见部分的高度 ) 。
Element.clientWidth 属性返回元素节点 (可见部分的宽度 ) 。
这两个属性可以计算得到，等于元素的CSS高度（或宽度）加上CSS的Padding，减去滚动条（如果存在）。
对于整张网页来说，当前可见高度（即视口高度）要从document.documentElement对象（即<html>节点）上获取，等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时，这两个值是相等的；有滚动条时，前者小于后者。
document.documentElement.clientHeight === window.innerHeight - 水平滚动条的高度
所谓“可见部分”，指的是不包括溢出（overflow）的大小，只返回该元素在容器中占据的大小，对于有滚动条的元素来说，它们等于滚动条围起来的区域大小。这两个属性的值包括Padding、但不包括滚动条、边框和Margin，单位为像素。


var rootElement = document.documentElement;

// 没有水平滚动条时
rootElement.clientHeight === window.innerHeight // true

// 没有垂直滚动条时
rootElement.clientWidth === window.innerWidth // true

(2) Element.clientLeft，Element.clientTop

-----------------边框的宽高度-------------------

Element.clientLeft属性等于元素节点左边框（left border）的宽度，单位为像素。
Element.clientTop属性等于元素节点顶部边框的高度，单位为像素。
注意：如果元素的显示设为display: inline，它的clientLeft属性一律为0，不管是否存在左边框。

(3) Element.scrollHeight，Element.scrollWidth

-------------------总的宽高度-------------------

-------------------------不包括边框和滚动条-------------------------

Element.scrollHeight属性返回某个网页元素的 ( 总高度 )。
Element.scrollWidth 属性返回某个网页元素的 ( 总宽度 )。
它们返回的是整个元素的高度或宽度，包括由于存在滚动条而不可见的部分。
可以理解成元素在垂直和水平两个方向上可以滚动的距离。它们都包括由于溢出容器而无法显示在网页上的那部分高度或宽度。这两个属性是只读属性。
整张网页的总高度可以从document.documentElement或document.body上读取。
如果内容正好适合它的容器，没有溢出，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。如果存在溢出，那么scrollHeight属性大于clientHeight属性，scrollWidth属性大于clientWidth属性。


element.scrollHeight - element.scrollTop === element.clientHeight


存在溢出时，当滚动条滚动到内容底部时，下面的表达式为true

如果滚动条没有滚动到内容底部，上面的表达式为false。



---------------------------------------------------

这个特性结合onscroll事件，可以判断用户是否滚动到了指定元素的底部，

比如向用户展示某个内容区块时，判断用户是否滚动到了区块的底部。

(4) Element.scrollLeft，Element.scrollTop

-------scrollTop顶部到最顶部的距离------可读写------

Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量。
Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。
这两个属性都可读写，设置该属性的值，会导致浏览器将指定元素自动滚动到相应的位置。
一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。


document.documentElement.scrollLeft

document.documentElement.scrollTop

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElemen元素上读取。

(5) Element.offsetHeight，Element.offsetWidth

--------Element.offsetHeight--------包括padding，border，滚动条

--------Element.clientHeight--------只包括padding

Element.offsetHeight属性返回元素的垂直高度。
Element.offsetWidth 属性返回元素的水平宽度。
offsetHeight可以理解成元素左下角距离左上角的位移，offsetWidth是元素右上角距离左上角的位移。它们的单位为像素，都是只读。
这两个属性值包括Padding和Border、以及滚动条。
这也意味着，如果不存在内容溢出，Element.offsetHeight只比Element.clientHeight多了边框的高度。


// 网页总高度
document.documentElement.offsetHeight
document.body.offsetHeight

// 网页总宽度
document.documentElement.offsetWidth
document.body.offsetWidth

(6) Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，
Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。

总结：

client，scroll，offset的区别：
http://blog.csdn.net/k491022087/article/details/52629743

整张网页的高度和宽度，可以从document.documentElement（即<html>元素）或<body>元素上读取。

// 网页总高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

// 网页总宽度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth

由于<html>和<body>的宽度可能设得不一样，因此从<body>上取值会更保险一点。






-----------------------------------------------------------------------

视口的高度和宽度（包括滚动条），有两种方法可以获得。
对于整个网页，基本都不会设置border，所以只考虑padding和滚动条的影响


// 视口高度
window.innerHeight // 包括滚动条
document.documentElement.clientHeight // 不包括滚动条

// 视口宽度
window.innerWidth // 包括滚动条
document.documentElement.clientWidth // 不包括滚动条






-----------------------------------------------------------------------

网页目前滚动的距离，可以从document.documentElement节点，和document.body 上得到。

(重要)(重要)(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要)



// 网页滚动的水平距离
document.documentElement.scrollLeft
document.body.scrollLeft

// 网页滚动的垂直距离
document.documentElement.scrollTop
document.body.scrollTop

案列：

回到顶部按钮功能：
(1) 监听滚动事件，如果当前的 scrollTop值大于文档的可视高度clientHeight，就显示回到顶部的按钮；否则，隐藏；
(2) 设置总时间比如：500ms
(3) 求出滚动的速度：当前的scrollTop值 / 总时间
(4) 设置每次滚动的时间stepTime：比如 10ms
(5) 计算每次滚动的距离：速度*stepTime
(6) 设置定时器，当scrollTop<=0时，清除定时器,并跳出定时器里面的距离计算


import React,{Component} from 'react';



export default class toTOP extends Component {
    state = {
        buttonShow: false
    }
    componentWillMount() {
        window.addEventListener('scroll',this.onScroll)  // 监听滚动事件
    }
    onScroll = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;   // 顶部到最顶部的距离
        var viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;  // 可视高度
        
        if ( currentTop > viewPortHeight) {  // 大于显示按钮
            this.setState({
                buttonShow:true
            })
        } else {
            this.setState({ // 小于隐藏按钮
                buttonShow: false
            })
        }
    }
    goTop = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;
        var totalTimes = 200;
        var speed = currentTop/totalTimes ;
        var StepTime = 10;
        var setpDistance = speed * StepTime;

        var timer = window.setInterval(()=>{     // var itmer = setInterval()也可以，不要window
            if ( currentTop <=0 ) {
                window.clearInterval(timer);
                return;
            }
            currentTop = currentTop - setpDistance;
            document.documentElement.scrollTop = currentTop;
            document.body.scrollTop = currentTop;
        },StepTime)
        
    }
    render() {
        return (
            <div >
                <div>
                    回到顶部测试
                </div>

                <div 
                ref="button"  
                onClick={this.goTop}
                style={
                    this.state.buttonShow
                    ?
                    {
                        display:'inline-block',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }
                    :
                    {
                        display:'none',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }
    
                }>
                    回到顶部
                </div>


                <div style={{padding:'20px 160px'}}>
                年参演电视剧《与青春有关的日子》，开始在影视圈崭露头角[1]  。2005年拍摄古装剧《锦衣卫》。2007年主演赵宝刚导演的青春剧《奋斗》；[2]  同年，主演首部电影《走着瞧》。2008年主演滕华涛执导的电视剧《蜗居》，饰演80后城市青年小贝。[1]  2009年，在电影《海洋天堂》中扮演自闭症患者王大福；同年参演抗战题材的电视剧《雪豹》[4]  。2011年，主演的电视剧《裸婚时代》在各大卫视播出；[5]  2011年-2012年连续2年获得北京大学生电影节[6-7]  最受大学生欢迎男演员奖。2012年，凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖；[8]  同年成立自己经营的北京君竹影视文化有限公司，并导演第一部影视作品《小爸爸》。2013年2月，主演的电影《西游·降魔篇》在全国上映。[9]  
2014年3月28日，主演的中韩合资文艺爱情片《我在路上最爱你》在全国上映。2014年12月18日，在姜文执导的动作喜剧片《一步之遥》中扮演武七一角。[10]  2016年，主演电视剧《少帅》，饰演张学良[11]  ；主演电视剧《剃刀边缘》[12]  。7月15日导演的电影《陆垚知马俐》上映。[13]  
演艺事业外，文章也参与公益慈善事业，2010年成立大福自闭症关爱基金。
2017年9月16日，凭借《陆垚知马俐》获得第31届中国电影金鸡奖导演处女作奖。[14]  

关于你。就是因为我的害怕，我亲眼看你走向她。我喜欢你是事实，你有女朋友也是事实。我以为我不说出口就会保持这样的朋友关系，却还是她赶了个巧，那应该是个寒假，你有女朋友了，我还是听说，我那么爱，却还是无果。于是我和她之间就莫名其妙的就多少有了敌人的感觉，或许就是别人口中的那样，世界上完全不相干的两个女人，会因为一个男人要么很友好，要么是仇恨。关于她我做不到友好，但也不是仇恨，只是你选择了她，我就希望她好好爱你，照顾你，连我的份也一起爱了。自爱上你的那天起，思念便成了戒不掉的瘾。你的一言一笑，一颦一蹙，无不牵动我的心，百千尘思，唯念一缕；万千红颜，唯恋一人。我愿意一生漂泊浪迹在你的故事里，甘愿为你鞍前马后，马首是瞻，即使你从未给我一句承诺，即使你从未给我半分爱情，依然无悔无怨。
　　 关于你。一场高考，考散了我们，毕业了会不会就是终生最后一见，很高兴，我们不是。各奔东西了，你们继续上了大学，值得欣慰的是，你们也是异地，这样不能算是我心机，只能说是恰巧，你们的安排恰合我意。后来也有听说，她从她的城市去看你，而那时的我能说什么呢。她是真心爱你，这是事实。我也曾和闺蜜说过，一生至少该有一次，为了某个人而忘了自己，不求有结果，不求同行，不求曾经拥有，甚至不求你爱我，只求在我最美的年华里，遇到你。今生遇见你，我觉得是幸福的，尽管这幸福交杂着万般痛苦。我也曾幻想着悄悄地去到你的学校，在某个阳光明媚的下午，在你去教室的路上和你来场偶遇，精心准备的偶遇，。可是我还来不及去和你偶遇，你们就毕了业。爱是种很玄的东西，说不清，道不明，剪不断，理还乱。世上，有种爱明知没有结果，却依然坚守原地，不舍离去，哪怕握不住你的一丝余温，依然选择默默为你守候。一路来去，心门只为你独开，山城只为你独驻，白天只为你旖旎，黑夜只为你流连。因为爱你，哪怕心入住荒岛，还是会以最深情的眼神，看着你幸福。
                </div>
               
            </div>
        )
    }
}

React.js学习笔记(15) window对象 + ( el

(一) window对象

(1) 概述

(2) window对象的属性

(1) window.window

(2) window.name

(3) window.location

(4) window.closed

(5) window.opener

(6) window.screenX属性，window.screenY属性

(7) window.innerHeight，window.innerWidth

(8) window.outerHeight，window.outerWidth

(9) window.pageXOffset，window.pageYOffset

(3) window对象的方法

(1) window.scrollTo()--------滚动到

(2) window.scrollBy()--------滚动了，有正负

(3) window.open()

(4) window.close()

(二) element对象盒模型属性

(1) Element.clientHeight，Element.clientWidth

-------------------可见部分宽高度-------------------

--------Element.clientHeight--------只包括padding

--------Element.offsetHeight--------包括padding，border，滚动条

(2) Element.clientLeft，Element.clientTop

-----------------边框的宽高度-------------------

(3) Element.scrollHeight，Element.scrollWidth

-------------------总的宽高度-------------------

-------------------------不包括边框和滚动条-------------------------

(4) Element.scrollLeft，Element.scrollTop

-------scrollTop顶部到最顶部的距离------可读写------

(5) Element.offsetHeight，Element.offsetWidth

--------Element.offsetHeight--------包括padding，border，滚动条

--------Element.clientHeight--------只包括padding

(6) Element.offsetLeft，Element.offsetTop

总结：

案列：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React.js学习

JavaScript 进阶营