父级页面动态适应iframe高度变化

来源：互联网发布：珠宝设计软件编辑：程序博客网时间：2024/06/16 15:05

实现原理：
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;}

0 0