`
royzhou1985
  • 浏览: 254457 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

window.onresize 触发多次解决方法

阅读更多
最近在做一个界面 由于用到iframe 当主页面onresize的时候需要对子页面的布局重新调整 发现onresize时间会重复调用多次
随后发现可以通过setTimeout来延迟调用要执行的方法。
具体使用如下:
var  resizeTimer = null;

function doResize(){
	document.frames['contentFrame'].SetGrid();
}

window.onresize = function(){
	if(resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout("doResize()",100);

}


顺便附上作品留念 哈哈





  • 大小: 255.6 KB
分享到:
评论

相关推荐

    在IE浏览器中resize事件执行多次的解决方法

    在IE浏览器中,resize事件可能会遇到一个问题,即在用户调整窗口大小时,该事件会被频繁地触发,导致处理函数被执行多次。这个问题不仅影响性能,还可能由于事件处理过程中的复杂计算,特别是在IE浏览器中,引发...

    [JavaScript]解决页面onresize缩放时多次调用的问题.doc

    【JavaScript】解决页面onresize缩放时多次调用的问题 在网页开发中,我们常常需要监听浏览器窗口的resize事件,以便在用户改变窗口大小时调整布局或内容。然而,在JavaScript中,尤其是对于老旧的IE浏览器(如IE8...

    [removed] 多次触发的解决方法

    然而,由于浏览器的差异性,`onresize`事件可能会被触发多次,这可能导致不必要的计算负担,甚至引起页面状态的混乱。本文将详细介绍如何解决`onresize`事件多次触发的问题。 首先,我们要理解`onresize`事件在不同...

    JS控制网页背景随窗口大小自动适应

    - **事件监听**:通过`window.onresize`和`window.onload`两个事件来触发调整背景图尺寸的操作。 - **获取窗口尺寸**:根据不同的浏览器环境(IE与非IE)采用不同的方法获取窗口的高度和宽度。 - **更新背景图片尺寸...

    VueJs监听window.resize方法示例

    // 使用IIFE防止多次绑定 (function() { window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; })(); }; } ``` 3. **使用`watch`监听属性变化**: 创建一个`watch`监听...

    IE下[removed] 多次调用与死循环bug处理方法介绍

    在本文中,我们将深入探讨一个IE浏览器特有的问题:`window.onresize`事件的多次调用与死循环bug,以及如何有效地解决这个问题。 `window.onresize`事件是JavaScript中用于监听窗口大小改变的事件。当用户调整...

    修复ie8&chrome下window的resize事件多次执行

    这个绑定器的目标是解决在IE8及以下和Chrome中`window.resize`事件多次触发的问题。下面是对`onWindowResize`事件绑定器的详细解析: 1. **事件队列(Event Queue)**:`queue`数组用于存储所有注册的事件处理函数...

    浏览器窗口加载和大小改变事件示例

    在实际开发中,还需要考虑性能优化,避免在`onresize`事件中执行过于复杂的操作,因为窗口大小的频繁改变可能会触发多次该事件,导致不必要的计算负担。合理地利用这两个事件,可以为用户提供更加舒适、适应性强的...

    javascript学习笔记1

    - `window.onresize`:页面大小改变时触发。 以上就是关于JavaScript中的数组方法、DOM操作和BOM的基本知识点介绍。这些知识点对于前端开发人员来说非常重要,掌握它们可以帮助开发者更好地编写动态网页和Web应用...

    让html元素随浏览器的大小自适应垂直居中的实现方法

    因此,这里采用了防抖(debounce)技术,通过`setTimeout`延迟执行`divMiddle`函数,确保在多次`onresize`事件之间只执行一次,提高页面性能。 总的来说,实现HTML元素随浏览器大小自适应垂直居中,需要结合CSS布局和...

    js共享 js 问题

    - **多层父级查找**: 有时需要通过多层父级节点才能找到目标元素,此例中通过多次调用`parentNode`方法来查找。 **应用场景:** 当点击事件发生在`<td>`元素内部的其他元素上时,可能需要找到该`<td>`元素本身,...

    javascript判断iphone/android手机横竖屏模式的函数

    为了解决这个问题,一些方法被提出,比如延迟检测、状态保存等策略来确保即便`onresize`事件多次触发,也能准确判断屏幕的方向。 最后,我们可以得出一个用于判断iPhone和Android手机横竖屏模式的JavaScript函数...

    原生javascript实现图片弹窗交互效果

    在JavaScript中,当我们需要声明多个变量时,通常会一次性声明它们,而不是为每个变量单独写一个`var`关键字。例如: ```javascript var sScrollTop = document.body.scrollTop || document.documentElement....

    vue中echarts图表大小适应窗口大小且不需要刷新案例

    window.onresize = () => { that.myChart.resize(); }; // 对于特定的echarts图表容器,我们使用element-resize-detector监听其大小变化 elementResizeDetectorMaker().listenTo(document.getElementById('...

    浅谈JavaScript函数节流

    函数节流的基本原理是通过设定一个时间间隔,在这个间隔内,即使函数被多次调用,也只会执行一次。当这个间隔过去后,如果函数再次被调用,才会执行下一次。这样可以确保函数不会过于频繁地执行,特别是在响应用户...

    深入浅出理解JavaScript高级定时器原理与用法

    在上述代码中,`throttle`函数接收一个待节流的方法和上下文作为参数,每次触发`onresize`事件时,它会确保`resizeDiv`函数至少等待100毫秒后再执行,防止连续的窗口调整导致的性能问题。 总之,深入理解JavaScript...

    Javascript 是你的高阶函数(高级应用)

    在实际的开发过程中,高阶函数可以解决许多常见的编程问题,如柯里化可以优化多次重复调用相似函数的情况,偏函数可以简化具有共同初始参数的函数调用。掌握高阶函数并能够灵活运用,是提升JavaScript编程水平的一个...

    花式滑块

    可以利用媒体查询(`@media`)和JavaScript的窗口大小监听(`window.onresize`)来调整滑块的布局和尺寸。 7. **模块化和可维护性**:一个良好的滑块组件应遵循模块化原则,将功能分解为可复用的函数或类。使用封装...

Global site tag (gtag.js) - Google Analytics