最近使用iframe整合页面遇到一些难题，走了很多弯路才解决，借此记录一下；
1 <!-- 页面主体内容 -->
2 <div class="iframe-wrapper" >
3 <iframe scrolling="no" id="iframe1" name="iframe1"
4 src="../index/index_copy.html" frameborder="0" width="100%" height="1000"></iframe>
5 </div>
6 <!-- 下面的代码也可以在iframe标签内写成 onload="this.height=this.contentWindow.document.body.scrollHeight" -->
7 <script>
8 $('#iframe1').load(function (){
9 this.height=this.contentWindow.document.body.scrollHeight;
10 })
11 </script>
以上写完之后，iframe的高度就可以随着内嵌的子页面变化而变化，但是问题也出现了，子页面body的高度并不完全等于iframe的高度，
这样就会导致显示的页面很丑，有的也会显示不全；网上试了很多办法都没成功，最后找到一种方法，该方法的原理就是监听元素的变化，
一旦元素一变化就把子页面的高度设置到iframe的高度中，废话不说了，上代码；
<!-- 将以下代码放到页面调用的公共js中/也可以单独在需要的页面引入 -->
function bodyResize(){
parent.window.document.getElementById('iframe1').height=(document.body.scrollHeight);
} /**
* 动态调整iframe高度的公共方法
*/
var EleResize = {
_handleResize: function (e) {
var ele = e.target || e.srcElement;
var trigger = ele.__resizeTrigger__;
if (trigger) {
var handlers = trigger.__z_resizeListeners;
if (handlers) {
var size = handlers.length;
for (var i = 0; i < size; i++) {
var h = handlers[i];
var handler = h.handler;
var context = h.context;
handler.apply(context, [e]);
}
}
}
},
_removeHandler: function (ele, handler, context) {
var handlers = ele.__z_resizeListeners;
if (handlers) {
var size = handlers.length;
for (var i = 0; i < size; i++) {
var h = handlers[i];
if (h.handler === handler && h.context === context) {
handlers.splice(i, 1);
return;
}
}
}
},
_createResizeTrigger: function (ele) {
var obj = document.createElement('object');
obj.setAttribute('style',
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
obj.onload = EleResize._handleObjectLoad;
obj.type = 'text/html';
ele.appendChild(obj);
obj.data = 'about:blank';
return obj;
},
_handleObjectLoad: function (evt) {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
}
};
if (document.attachEvent) {//ie9-10
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners;
if (!handlers) {
handlers = [];
ele.__z_resizeListeners = handlers;
ele.__resizeTrigger__ = ele;
ele.attachEvent('onresize', EleResize._handleResize);
}
handlers.push({
handler: handler,
context: context
});
};
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners;
if (handlers) {
EleResize._removeHandler(ele, handler, context);
if (handlers.length === 0) {
ele.detachEvent('onresize', EleResize._handleResize);
delete ele.__z_resizeListeners;
}
}
}
} else {
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners;
if (!handlers) {
handlers = [];
ele.__z_resizeListeners = handlers; if (getComputedStyle(ele, null).position === 'static') {
ele.style.position = 'relative';
}
var obj = EleResize._createResizeTrigger(ele);
ele.__resizeTrigger__ = obj;
obj.__resizeElement__ = ele;
}
handlers.push({
handler: handler,
context: context
});
};
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners;
if (handlers) {
EleResize._removeHandler(ele, handler, context);
if (handlers.length === 0) {
var trigger = ele.__resizeTrigger__;
if (trigger) {
trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
ele.removeChild(trigger);
delete ele.__resizeTrigger__;
}
delete ele.__z_resizeListeners;
}
}
}
}
最后子页面的js的初始化的前面调用
1 //动态调整iframe高度
2 EleResize.on(document.body,function(){bodyResize();});
3
4 //页面初始化代码
5 $(function () {
6 //获取列表数据
7 getData(nowPage);
8 // $("body").live("resize",bodyResize());
9 //$("body").resize(bodyResize());
10 // $("body").resize(alert(123455));
11 });
这样iframe页面就可以自动随着子页面的标签变化而动态变化了