实现原理:
iframe通过修改父级url地址来提醒父级页面,iframe高度有变化。
父级页面中定义的iframe:
<iframe id="iframe" name="iframe" align="middle" style="min-width:1280px;width:100%;margin:0 auto" height="1000px" min-height="1000px" frameborder="0" scrolling="no" onLoad="loadIframe()" src=""></iframe>
父级页面js:
每隔200ms获取页面url的锚点高度,刷新iframe高度
$(document).ready(function() {
setInterval(iframeHeight, 200);
});
var iframe = document.getElementById("iframe");
//高度自适应
var iframeHeight = function() {
var hash = window.location.hash.slice(1);
if (hash && /height=/.test(hash)) {
iframe.height = hash.replace("height=", "");
}
};
iframe动态高度的dom:
<sysconf id="sysconfdom" style=" clear:both;float:left; width:100%;">
iframe的js:
获取动态高度,改变父页面的地址
var hurl =getParentUrl();
var hostUrl = hurl.split("#")[0];
if(!/height=/.test(hostUrl)){
hostUrl += "#height=" + $('#sysconfdom').height();
window.top.location = hostUrl;
}
function getParentUrl() {
var url = null;
if (parent != window) {
try {
url = parent.location.href;
} catch (e) {
url = document.referrer;
}
}
return url;
}