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. Spark 核心概念RDD

    文章正文 RDD全称叫做弹性分布式数据集(Resilient Distributed Datasets),它是一种分布式的内存抽象,表示一个只读的记录分区的集合,它只能通过其他RDD转换而创建,为此, ...

  2. Nginx负载均衡权重,ip_hash

    nginx为后端web服务器(apache,nginx,tomcat,weblogic)等做反向代理 几台后端web服务器需要考虑文件共享,数据库共享,session共享问题.文件共享可以使用nfs, ...

  3. 【Python】 sort、sorted高级排序技巧

    文章转载自:脚本之家 这篇文章主要介绍了python sort.sorted高级排序技巧,本文讲解了基础排序.升序和降序.排序的稳定性和复杂排序.cmp函数排序法等内容,需要的朋友可以参考下 Pyth ...

  4. 【转】Ubuntu FireFox无法播放网页视频音乐的解决办法

    原文:http://www.codeweblog.com/%E8%A7%A3%E5%86%B3qq%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%E5%9C ...

  5. 【iCore4 双核心板_ARM】例程十四：FATFS实验——文件操作

    实验现象: 核心代码: int main(void) { int i,j; FIL file; FATFS fatfs; static FRESULT res; unsigned ]; unsigne ...

  6. 转载：安装Ubuntu 15.10后要做的事

    转载:安装Ubuntu 15.10后要做的事 原文转载于:http://blog.csdn.net/skykingf/article/details/45267517 Ubuntu 15.10发布了, ...

  7. Mysql系列七：分库分表技术难题之分布式全局唯一id解决方案

    一.前言 在前面的文章Mysql系列四:数据库分库分表基础理论中,已经说过分库分表需要应对的技术难题有如下几个: 1. 分布式全局唯一id 2. 分片规则和策略 3. 跨分片技术问题 4. 跨分片事物 ...

  8. Git服务器环境搭建(打造属于自己的存储库)

    Git服务器搭建之CentOs7-阿里云搭建 首先使用连接工具连接到远程的阿里云服务器CentOs7上. 1.安装Git及创建用户 # 安装Git $ yum install git # 创建一个gi ...

  9. Android四大组件之——Activity(一)定义、状态和后退栈(图文详解)

    什么是Activity 关键字:应用组件.四大组件.用户界面,交互. An Activity is an application component that provides a screen wi ...

  10. 中文数据解码报错 UnicodeDecodeError: 'gbk' codec can't decode bytes in position 2-3: illegal multibyte sequence

    UnicodeDecodeError: 'gbk' codec can't decode bytes in position 2-3: illegal multibyte sequence 失败原因: ...