公司有个新需求，要给ios那边传送文章的高度，好让ios完成一个复杂布局。
我这边的内容是后台富文本编辑好的html文件，包括了图片视频文字等内容，所以全部加载完成前高度是一直发生变化的。
一开始做的时候没想得太仔细，html内容加载后我就读取高度了，这就导致一些图片还没加载完全时，整个内容高度就读取了，造成高度过小，后台换了个思路想遍历所有图片和视频的内容，用onLoad钩子监听这些元素是否加载完成，但发现没作用，这种监听法法只适应在比如img标签还没加载进去时就绑定监听事件的，整个html插入后就无法再使用。
最后，百度了一番，看到牛人的杰作，只需创建一个宽高暂满而且不可视的iframe便签，然后监听iframe里面window的resize事件就好了。真是方便啊。
参考文章
<div class="container" id="mapDiv" >
hello
</div>
function resize (el, cb) {
// 创建iframe标签，设置样式并插入到被监听元素中
var iframe = document.createElement('iframe');
iframe.setAttribute('class', 'size-watch');
el.appendChild(iframe);
// 记录元素当前宽高
var oldWidth = el.offsetWidth;
var oldHeight = el.offsetHeight;
// iframe 大小变化时的回调函数
function sizeChange () {
// 记录元素变化后的宽高
var width = el.offsetWidth;
var height = el.offsetHeight;
// 不一致时触发回调函数 cb，并更新元素当前宽高
if (width !== oldWidth || height !== oldHeight) {
cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
oldWidth = width;
oldHeight = height;
}
}
// 设置定时器用于节流
var timer = 0;
// 将 sizeChange 函数挂载到 iframe 的resize回调中
iframe.contentWindow.onresize = function () {
clearTimeout(timer);
timer = setTimeout(sizeChange, 20);
};
}
//var el = document.getElementById("mapDiv");
var el = document.querySelector('.container');
resize(el, (val, oldVal) => {
console.log(`size changed！new: ${JSON.stringify(val)}, old: ${JSON.stringify(oldVal)}`);
});
