为网页元素增加resize事件

默认只有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);

      });

    });

  }

}