监听页面高度变化_js监听某个元素高度变化来改变父级iframe的高度

最近需要做一个iframe调用其他页面内容，这个iframe地址是可变化的，但是里面的内容高度不确定且里面内容高度可调整，所以需要通过监听iframe里面body的高度变化来调整iframe的高度。

后面发现了一个好用的插件detect-element-resize.js，首先看一下这个插件的介绍：

插件简介

跨浏览器，基于事件，元素调整大小检测。

简而言之，此实现不使用内部计时器来检测大小更改(就像我发现的大多数实现一样)。它使用scroll大多数浏览器上的onresize事件，以及IE10及以下的事件。

使用的方法不仅检测javascript生成的调整大小更改，还检测CSS伪类的更改，例如：hover，CSS动画等。

插件兼容性

Chrome

Firefox

IE 11 及以下 (在11,10,9,8和7上测试)

已知问题

在IE 10及更低版本上：如果分离元素并重新附加它，则需要再次添加调整大小侦听器。

源代码

(function () {

var attachEvent = document.attachEvent,

stylesCreated = false;

if (!attachEvent) {

var requestFrame = (function(){

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||

function(fn){ return window.setTimeout(fn, 20); };

return function(fn){ return raf(fn); };

})();

var cancelFrame = (function(){

var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||

window.clearTimeout;

return function(id){ return cancel(id); };

})();

function resetTriggers(element){

var triggers = element.__resizeTriggers__,

expand = triggers.firstElementChild,

contract = triggers.lastElementChild,

expandChild = expand.firstElementChild;

cont