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. DropDMG for Mac（dmg 文件打包工具）破解版安装

    1.软件简介    DropDMG 是 macOS 系统上的一款帮助用户快速打包 DMG 文件的 Mac 文件管理软件,DropDMG 不但可以将影像档加密.更可以配合 GZip .BZip2 .Ma ...

  2. 11G新特性 -- ASM Fast Mirror Resync

    ASM Fast Mirror Resync     在oracle 10g中,如果asm磁盘因为光纤.控制器发生故障而发生failure,asm将无法继续向该磁盘中写入数据.     asm会将发生 ...

  3. C#:网络传输问题

    1.Http Post Header 中文数据值,服务端接收Header 中文数据值乱码问题: 客户端:    Encoding utf8Encoding = Encoding.GetEncoding ...

  4. 最新以及历史各版本 .NET Framework 的下载

    唔,如题,详见地址:https://www.microsoft.com/net/download/windows

  5. [k8s]kube-dns/dashboard排错历险记(含sa加载用法/集群搭建)

    kube-dns原理 参考: 组件架构看这个就够了 http://cizixs.com/2017/04/11/kubernetes-intro-kube-dns 设置细节看这个就够了 http://b ...

  6. 微信小程序测试指南

    [本文出自天外归云的博客园] 微信小程序本地部署测试方法 下载微信开发者工具 让小程序管理员将测试人员的微信号添加开发者权限 本地设置hosts为测试环境hosts 打开微信web开发者工具并扫码登录 ...

  7. python 的正则表达式

    在python中,对正则表达式的支持是通过re模块来支持的.使用re的步骤是先把表达式字符串编译成pattern实例,然后在使用pattern去匹配文本获取结果. 其实也有另外一种方式,就是直接使用r ...

  8. MySQL中文参考手册

    1 MySQL 的一般信息 这是MySQL参考手册:它记载了MySQL版本3.23.7-alpha. MySQL 是一个快速.多线程.多用户和强壮的SQL数据库服务器. 对Unix和 OS/2 平台, ...

  9. mercurial的几个易用性小技巧

    其实这两年,能够采用mercurial的项目我都尽量用,甚至有些上游是git的,或者需要托管到公司内gitlab上与别人协作的,我都装上hg-git.无它,只是因为mercurial易用性比git好得 ...

  10. Fixed Partition Memory Management UVALive - 2238 建图很巧妙 km算法左右顶点个数不等模板以及需要注意的问题 求最小权匹配

    /** 题目: Fixed Partition Memory Management UVALive - 2238 链接:https://vjudge.net/problem/UVALive-2238 ...