html 页面缩放事件,浏览器缩放不触发window.onresize事件的BUG

在帮同事处理一个页面缩放BUG的时候惊奇的发现各种浏览器的缩放不触发window.onresize的BUG，太坏了！

我理解的能正常工作的浏览器有：

IE6

FF3

以下浏览器Ctrl+和Ctrl-时均不触发window.onresize事件，只在窗口大小改变时才触发：

IE8 Beta2，无论是Ctrl+，Ctrl-还是最大化最小化，拖拽改变窗口大小，都无法触发window.onresize事件，真是彻底失效了！

Opera 9.52

Chrome 0.2.149.30

Netscape 9.0.0.6

Mozilla 1.7.13

Safari 3.1.2(525.21)

FF2.x

修正的BUG：

page中有width:auto的区块，当缩放字体大小时，该区块大小不能自动更新！

wind

html,body {margin:0;padding:0;}

#x {background:red;}

#y {width:76em;}

var eve = {

bindEvent:function(d,e,f,c){

if(d&&f){

if(document.attachEvent){

if(!!d.length){

for(var i=0,l=d.length;i

}else{

d.attachEvent('on'+e,f);

}

}else{

if(d.length){

for(var i=0,l=d.length;i

}else{

d.addEventListener(e,f,c);

}

removeEvent:function(d,e,f,c){

if(d&&f){

if(document.attachEvent){

if(!!d.length){

for(var i=0,l=d.length;i

}else{

d.detachEvent('on'+e,f);

}

}else{

if(!!d.length){

for(var i=0,l=d.length;i

}else{

d.removeEventListener(e,f,c);

}

var rs = function(objID){

var ow = document.documentElement.scrollWidth;

var objID = objID;

var times = 0;

var set = function(){

times += 1;

var xx = document.getElementById(objID);

var w = document.documentElement.scrollWidth;

xx.style.width = (w>ow)?w+'px':(!/MSIE/s6/.0/.test(navigator.userAgent))?w+'px':(w==ow)?'auto':w+'px';

if(times>2){

times = 0;

eve.removeEvent(window,'resize',rs,false);

window.setTimeout(function(){eve.bindEvent(window,'resize',rs,false)},0);

}

return function(){

var xx = document.getElementById(objID);

xx.style.width = ow+'px';

alert(ow);

window.setTimeout(set,0);

}

}('x');

eve.bindEvent(window,'resize',rs,false);

M A S T H E A D

转载请注明出处：http://www.v-ec.com/dh20156/article.asp?id=186

html 页面缩放事件,浏览器缩放不触发window.onresize事件的BUG相关推荐

Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用
属性 window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数. 在窗口大小改变之后,就会触发resize事件. //vue页面 <template>& ...
html页面整体缩小,浏览器缩放原理以及窗口、html页面大小
在这篇文章里,将会解释视窗(viewports)和各种重要元素(例如元素)的宽度是如何工作的,同样也会解释浏览器窗口(window)和屏幕(screen)的宽度问题. 概念:设备的pixels和CSS ...
vue 页面长时间静止不动，触发自动退出事件
import store from '@/store' import router from '@/router' import Cookies from "js-cookie"; ...
vue监听元素变化不触发window.onresize
1.下载 npm i element-resize-detector --save 2.引入 const elementResizeDetectorMaker = require('element-r ...
利用 onresize 事件，实现页面大小随浏览器窗口变化
前言在日常开发中,可能会遇见页面(元素)大小随浏览器窗口变化的需求.本文就记录了如何利用 onresize 事件,实现这样效果. 思路利用onresize 事件会在窗口大小发生变化时触发的特点,结 ...
PC端js禁止浏览器缩放
在网上找了很多资料,多多少少都有一些问题,现在重新整理一下. 1.网上的资料大多都是按照windows的devicePixelRatio来判断是否缩放的,这个判断不是很准确,因为在mac下,默认的de ...
html中页面按百分比显示,HTML页面百分比自适应浏览器小结
页面元素尺寸按百分比计算,其中图片元素要考虑到兼容IE6+,不可以使用背景IE9+的background-size. html,body,.swfbox{ height:100%; overflow: ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
在 vue 中使用 window.onresize及div的resize事件
项目场景: 如何在 vue 中使用 window.onresize 如何避免覆盖其它的 window.onresize 手动触发 window.onresize echarts 监听图表容器的大小并 ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...

html 页面缩放事件,浏览器缩放不触发window.onresize事件的BUG

html 页面缩放事件,浏览器缩放不触发window.onresize事件的BUG相关推荐

最新文章

热门文章