码迷,mamicode.com
首页 > 其他好文 > 详细

iframe高度自适应

时间:2019-08-11 01:13:30      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:his   用户体验   center   兼容   ||   name   border   load   窗口   

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

为了美观和用户体验,子父页面共用子页面的纵向滚动条,且子页面的内容是变化的,所以要设置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

 

iframe高度自适应

标签:his   用户体验   center   兼容   ||   name   border   load   窗口   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!