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新特性-自动sql调优(Automatic SQL Tuning)

    11g新特性-自动sql调优(Automatic SQL Tuning) 在Oracle 10g中,引进了自动sql调优特性.此外,ADDM也会监控捕获高负载的sql语句. 在Oracle 11g中, ...

  2. 同一个脚本在SQLPLUS和SQLDEV上的不同

    前几天收集了信息给Oracle.oracle那边表示格式不正确.让我又一次收集.我非常费解,我是依照官方文档做的呀,怎么会? 于是我果断自己搭了一个环境:RHEL5.8+10.2.0.5 客户那边没法 ...

  3. 有关volatile关键字和transient关键字

    (1)volatile关键字['vɑlətl]的作用 让变量每次在使用的时候,都从主存中取,而不是从各个线程的“工作内存”. 也就是说,volatile变量对于每次使用,线程都能得到当前volatil ...

  4. 将自己写的HDL代码封装成带AXI总线的IP

    将自己写的HDL代码封装成带AXI总线的IP 1.Tools->create and package IP 2.create AXI4总线的IP 3.新建block design 4.点击右键, ...

  5. MemoryFile偷取安卓内存

    参考链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0111/3859.html MemoryFile memoryFile ...

  6. LeetCode: Next Permutation 解题报告

    Next Permutation Implement next permutation, which rearranges numbers into the lexicographically nex ...

  7. Extjs4 DateTimeField，日期时间控件完美版

    网上若干类似的控件,要么是有bug,要么是操作体验不合理,这里贡献一个比较科学的版本. 扩展包下载: http://files.cnblogs.com/qidian10/Ext.ux.rar 解压至E ...

  8. maven 打jar 被引用后 出现 cannot resolve symbol 错误 生成jar包形式代码文件组织格式 非springboot文件组织格式

    项目A引用项目B A项目中pom引入没有报错,但是:1,idea里面查找到b项目中的代码时,会提示b代码中的引用不正确.提示无法解析语法 解压B的jar,发现目录是: springboot文件组织格式 ...

  9. C++ 智能指针一

    /* 智能指针shared_ptr */ #include <iostream> #include <string> #include <memory> //智能指 ...

  10. 【消息】Pivotal Pivots 开源大数据处理的核心组件

    Pivotal Pivots 开源大数据处理的核心组件 Pivotal 今天宣布将其大数据套件的三个核心组件开源,同时商业版本继续提供更高级特性和商业支持服务. 这三个开源的组件分别是: GemFir ...