window.onresize监听事件

　　onresize 事件会在窗口或框架被调整大小时发生。

　　支持onresize的标签：<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

一、屏幕的改变：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

    <meta content="telephone=no" name="format-detection">

</head>

<body>

<label id="show"></label>

<script>

    window.onresize = adjuest;

    adjuest();

    function adjuest(){

       var label = document.getElementById("show");

       label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;

    }

</script>

</body>

</html>

注：宽高会随着屏幕大小而改变

二、div大小的改变：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>

<label id="show"></label>

<script>

    window.onresize = adjuest;

    adjuest();

    function adjuest(){

        var label = document.getElementById("show");

        var divCon = document.getElementById("show_div");

        label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;

    }

</script>

</body>

</html>

注：宽会随着div的宽度大小而改变

三、发现浏览器窗口缩小时会触发两次 onresize 事件，解决方法：

当浏览器窗口大小改变的时候将会触发onresize事件。

可以监控该事件的发生做一些响应式的处理：

JS：

window.onresize(function(){

    //code

}):

jQuery:

$(window).resize(function(){

    //code

});

在监控的过程中发现每次改变浏览器窗口的时候 onresize 事件都会触发两次(产生 的原因貌似比较复杂，网上没有定论，发现在最大化浏览器的时候，浏览器也会闪一下，有两次窗口大小的改变)。

解决方法: setTimeout()

function windowResizeEvent(callback) {

    var firstFire = null;

    window.onresize = function () {

        if(firstFire === null) {

            firstFire = setTimeout(function() {

                firstFire = null;

                callback();

            }, 100);

        }

    }

}

window.onresize监听事件的更多相关文章

  1. 让$(window).scroll()监听事件只执行一次

    可以用jQuery中的unbind()来进行事件解绑. $(window).scroll(function() { console.log("滚离顶部" + $(document) ...

  2. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  3. 在Activity，Service，Window中监听Home键和返回键的一些思考，如何把事件传递出来的做法！

    在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法! 其实像按键的监听,我相信很多人都很熟练了,我肯定也不会说这些基础的东西,所以,前期,还是 ...

  4. javascript事件有哪些？javascript的监听事件

    事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...

  5. js 监听事件的叠加和移除

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ ...

  6. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  7. ionicModal中的监听事件

    //添加监听事件angular.module('MyApp').directive('gotTapped', ['$ionicGesture', function($ionicGesture) { r ...

  8. python hook监听事件

    python hook监听事件 作者:vpoet mail:vpoet_sir@163.com # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ ...

  9. 浅谈postMessage多页面监听事件

    最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下 ...

随机推荐

  1. 11G新特性 -- 收缩临时表空间

    当大任务执行完毕,并不会立即释放临时表空间.有时候通过删除然后重建临时表空间的速度可能更快.不过对于在线系统可能不会那么容易删除重建,所以11g中可以在线收缩临时表空间或单个临时数据文件. 收缩临时表 ...

  2. 通过MTK迁移Mysql到EDB实战指南

    1.1 迁移准备 下图是Migration toolkit(MTK)可使用的迁移功能 1 查看一下迁移源数据库testdb信息.共三张表 watermark/2/text/aHR0cDovL2Jsb2 ...

  3. linux每日命令(19)：locate 命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  4. Badboy教程

    Badboy教程 摘自:Badboy-系列教程-资料整理 2016-11-30 1 界面介绍 2 录制 3 创建suites,tests,steps和Template 4 运行脚本 5 参数化 Add ...

  5. Mysql系列五：数据库分库分表中间件mycat的安装和mycat配置详解

    一.mycat的安装 环境准备:准备一台虚拟机192.168.152.128 1. 下载mycat cd /softwarewget http:-linux.tar.gz 2. 解压mycat tar ...

  6. 说说自己对RESTful API的理解

    REST不是英文上的rest单词,其英文缩写为presentational State Transfer ,直译为表现状态转移,咋看起来很学术,不懂,其实不用去死抠这个词的意思.REST是一种约束和架 ...

  7. python 简单的server请求

    1.代码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # __author henry # __date 2018/11/4 from wsgiref ...

  8. 字符串时间与Unix时间戳相互转换

    字符串时间与Unix时间戳相互转换 /** * @Author: wangkun * @Date : 2016/1/21 13:43 * @Description : 字符串时间转换为Unix时间戳 ...

  9. Ant 学习笔记

    1.下载Ant 官方网站http://ant.apache.org/bindownload.cgi 下载最新版本  .zip archive: apache-ant-1.9.4-bin.zip [PG ...

  10. duilib进阶教程 -- XML嵌套及自定义控件 (4)

    代码下载:http://download.csdn.net/detail/qq316293804/6433937 之前入门教程里已经讲过了自定义控件,这里借着迅雷播放器再次举个例子. 1.我们先给迅雷 ...