公司有個新需求议薪，要給ios那邊傳送文章的高度罐孝，好讓ios完成一個復雜布局。
我這邊的內(nèi)容是后臺富文本編輯好的html文件狞尔，包括了圖片視頻文字等內(nèi)容丛版，所以全部加載完成前高度是一直發(fā)生變化的。
一開始做的時候沒想得太仔細偏序，html內(nèi)容加載后我就讀取高度了页畦，這就導致一些圖片還沒加載完全時，整個內(nèi)容高度就讀取了研儒，造成高度過小豫缨，后臺換了個思路想遍歷所有圖片和視頻的內(nèi)容，用onLoad鉤子監(jiān)聽這些元素是否加載完成端朵，但發(fā)現(xiàn)沒作用好芭，這種監(jiān)聽法法只適應在比如img標簽還沒加載進去時就綁定監(jiān)聽事件的，整個html插入后就無法再使用逸月。
最后栓撞，百度了一番，看到牛人的杰作碗硬，只需創(chuàng)建一個寬高暫滿而且不可視的iframe便簽瓤湘，然后監(jiān)聽iframe里面window的resize事件就好了。真是方便啊恩尾。
參考文章
<div class="container" id="mapDiv" >
hello
</div>
function resize (el, cb) {
// 創(chuàng)建iframe標簽弛说，設置樣式并插入到被監(jiān)聽元素中
var iframe = document.createElement('iframe');
iframe.setAttribute('class', 'size-watch');
el.appendChild(iframe);
// 記錄元素當前寬高
var oldWidth = el.offsetWidth;
var oldHeight = el.offsetHeight;
// iframe 大小變化時的回調(diào)函數(shù)
function sizeChange () {
// 記錄元素變化后的寬高
var width = el.offsetWidth;
var height = el.offsetHeight;
// 不一致時觸發(fā)回調(diào)函數(shù) cb，并更新元素當前寬高
if (width !== oldWidth || height !== oldHeight) {
cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
oldWidth = width;
oldHeight = height;
}
}
// 設置定時器用于節(jié)流
var timer = 0;
// 將 sizeChange 函數(shù)掛載到 iframe 的resize回調(diào)中
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)}`);
});
