iframe高度自适应

前提:父页面是功能选项,固定在网页上。在网页留出的空白部分,用于嵌套子页面

为了美观和用户体验,子父页面共用子页面的纵向滚动条,且子页面的内容是变化的,所以要设置iframe高度自适应

js代码

function setIframeHeight(iframe) {
  if (iframe) {
    /*
      contentDocument是获得iframe子窗口的document对象,兼容Firefox和ie8+
      contentWindow是获得子窗口的window对象,兼容大部分浏览器
    */
    
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;     if (iframeWin.document.body) {       iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;     }   } };
//获取子页面的高度 window.onload
= function () {   setIframeHeight(document.getElementById('external-frame')); };

html

<iframe id="iframe-center" scrolling="yes" rameborder="0" src="center.html" name="centerPage"class="pull-left" onload="setIframeHeight(this)"></iframe>

详情参考:http://caibaojian.com/iframe-adjust-content-height.html?tdsourcetag=s_pctim_aiomsg

原文地址:https://www.cnblogs.com/sunchunmei/p/11333441.html