默认只有window支持resize事件,但有时我们需要为div等元素添加resize事件

代码见下面,原理是在元素内添加一个内嵌html,然后监听这个内嵌html的resize事件

import { Injectable } from '@angular/core';

@Injectable()
export class ResizeEventService {
isIE: boolean; constructor() {
this.isIE = /Trident/.test(navigator.userAgent);
} addResizeListener(element: any, fn: any) {
const self = this;
if (!element.__resizeListeners__ || element.__resizeListeners__.length === 0) {
      element.__resizeListeners__ = [];
if (getComputedStyle(element).position === 'static') { element.style.position = 'relative'; }
const obj = element.__resizeTrigger__ = document.createElement('object') as any;
obj.setAttribute('style',
'display: block; position: absolute; top: 0; left: 0; height: 100%;'
+ 'width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
obj.__resizeElement__ = element;
obj.onload = function() {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
this.contentDocument.defaultView.addEventListener('resize', self.resizeListener);
};
obj.type = 'text/html';
if (this.isIE) { element.appendChild(obj); }
obj.data = 'about:blank';
if (!this.isIE) { element.appendChild(obj); } }
element.__resizeListeners__.push(fn);
} removeResizeListener(element: any, fn: any) {
if (!element.__resizeListeners__) {
return;
}
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', this.resizeListener);
element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
}
} private resizeListener(e: Event) {
const win = e.target || e.srcElement as any;
if (win.__resizeRAF__) { window.cancelAnimationFrame(win.__resizeRAF__); }
win.__resizeRAF__ = window.requestAnimationFrame(function() {
const trigger = win.__resizeTrigger__;
trigger.__resizeListeners__.forEach(function(fn: any) {
fn.call(trigger, e);
});
});
}
}

为网页元素增加resize事件的更多相关文章

  1. 怎样给div增加resize事件

    当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢? 先来回答另一个问题,监听 ...

  2. resize([[data],fn]) 当调整浏览器窗口的大小时,发生 resize 事件。

    resize([[data],fn]) 概述 当调整浏览器窗口的大小时,发生 resize 事件.   参数 fnFunctionV1.0 在每一个匹配元素的resize事件中绑定的处理函数.直线电机 ...

  3. 【JS 常用操作】全选、给后来元素增加事件

    11 //全选 $("#allCheckbox").click(function () { var checkedStatus = this.checked; //alert(ch ...

  4. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  5. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  6. IE 的resize事件问题

    window的resize事件,真的让人无语! 我在动态设置元素的HTML内容后,窗口高度变化了,可是却不触发resize事件. 但是我在访问document.documentElement.scro ...

  7. webBrowser中操作网页元素全攻略

    原文 webBrowser中操作网页元素全攻略 1.获取非input控件的值: webBrowser1.Document.All["控件ID"].InnerText; 或webBr ...

  8. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  9. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

随机推荐

  1. oracle系统包——dbms_random用法

    oracle中随机数的包的源文件目录:{oracle_home}\rdbms\admin\dbmsrand.sql 1.返回0~1间的随机数(包括0和1)sql> select dbms_ran ...

  2. r.js 配置文件 example.build.js 不完整注释

    /* * This is an example build file that demonstrates how to use the build system for * require.js. * ...

  3. C# Unix时间戳转换[转载]

    原文地址: C# Unix时间戳转换 遇到Unix时间戳转换的问题,遂记录下来. Unix时间戳转DateTime string UnixTime = "1474449764"; ...

  4. 利用kvo对集合进行操作

    利用kvo对集合进行操作 NSLog(@"其他学生的成绩%@", [array valueForKeyPath:@"point"]); NSLog(@" ...

  5. Gradient descent and others

    Batch gradient descent Procedure 在循环中跌倒公式\(\theta_j:=\theta_j-\alpha{1\over{m}}\sum_{i=1}^m(h_{\thet ...

  6. 打开usb调试的方法

    方法一: settings --> about tablet --> build number(疯狂点击)  -->回退 developer options --> USB d ...

  7. 新建文件可选类型插件:SublimeTmpl

    介绍:SublimeTmpl,新建文件可选类型.编辑模版在:SublimeTmpl\templates"文件夹修改 1.安装: 通过 Package Control Package Cont ...

  8. redis(3)发布订阅

    一.发布/订阅模式 在软件工程里面,发布/订阅是一种消息模式,这种模式旨在将消息发送者和消息接收者解耦.发送者不需要关心将消息发送给谁,接收者也不需要知道消息的发送者是谁.发送者将消息发布以后就结束动 ...

  9. Oracle OCI操作UDT相关学习(二)

    沿用 Oracle OCI操作UDT相关学习 一文中定义的类型和表. 1.更改数据 在sqldeveloper 中更新数据, update dxl.cust set addr.street='a11' ...

  10. java下double相乘精度丢失问题

    比如 System.out.println(0.14*100); 输出: 14.000000000000002 解决方法: BigDecimal b = new BigDecimal(String.v ...