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. Django Web开发学习笔记(1)

    一.Python的标准类型 (1)bool型 >>> bool("") False >>> bool(None) False >>& ...

  2. 开源的.NET任务调度框架-HangFire

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.内置提供集成化的控制台,方便后台查看及监控: 另外,Hangfire包含三大核心组 ...

  3. Socket网络编程--聊天程序(4)

    上一小节讲到可以实现多客户端与服务器进行通讯,对于每一个客户端的连接请求,服务器都要分配一个进程进行处理.对于多用户连接时,服务器会受不了的,而且还很消耗资源.据说有个select函数可以用,好像还很 ...

  4. 本地搭建Wooyun漏洞库环境

    众所周知,wooyun上有太多含金量的漏洞了,虽然互联网上也有相关的漏洞资源分享,但是万一有朝一日也被和谐了就又麻烦了,最放心的方式就是漏洞库放在本地,在本地搭建一套环境最好不过了,以下操作演示了如何 ...

  5. FiDDLER教程

    FiDDLER教程 摘自:林猪猪的部落格 的 前端工具 1 FIDDLER的使用方法及技巧总结(连载一)FIDDLER快速入门及使用场景 2 FIDDLER的使用方法及技巧总结(连载二)FIDDLER ...

  6. elk问题，求教各位大虾！

    [filebeat --> kafka --> logstash-->MongoDB|磁盘]架构进行日志收集 但是当logstash写入MongoDB有延迟,然后正常之后,会导致lo ...

  7. TCP连接

    https://www.cnblogs.com/dj0325/p/8490293.html

  8. git push 失败

    先上图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV29KaWFvRGFaaG9uZw==/font/5a6L5L2T/fontsize/400/fil ...

  9. SQL 逗号分隔将一行拆成多行

    and number<=len(a.KOrderID) and type=)=',')

  10. Go指南练习_映射

    源地址 https://tour.go-zh.org/moretypes/23 一.题目描述 实现 WordCount.它应当返回一个映射,其中包含字符串 s 中每个“单词”的个数.函数 wc.Tes ...