iframe高度自适应

- 日理万妓 2023-06-02 14:00 20阅读 0赞

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

为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要**设置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" οnlοad="setIframeHeight(this)"></iframe>

详情参考：[http://caibaojian.com/iframe-adjust-content-height.html?tdsourcetag=s\_pctim\_aiomsg][http_caibaojian.com_iframe-adjust-content-height.html_tdsourcetag_s_pctim_aiomsg]

转载于:https://www.cnblogs.com/sunchunmei/p/11333441.html

[http_caibaojian.com_iframe-adjust-content-height.html_tdsourcetag_s_pctim_aiomsg]: http://caibaojian.com/iframe-adjust-content-height.html?tdsourcetag=s_pctim_aiomsg

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe高度自适应

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe

- 日理万妓/ 2023年06月02日 14:00/ 0 赞/ 21 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 290 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 329 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 319 阅读

相关 iframe框架高度自适应

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

超、凢脫俗/ 2022年06月09日 13:08/ 0 赞/ 338 阅读

相关 iframe高度自适应问题

今天写了一下html静态页，遇到iframe高度自适应问题。本来是使用bootstrap的，看它上面的文档说直接使用它们给好样式就可以了。但是并没有达到要的效果。最后使用

约定不等于承诺〃/ 2022年05月17日 08:20/ 0 赞/ 298 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 362 阅读

相关 iframe高度自适应

<iframe src="index.html" onload="this.height=this.contentWindow.document.body.scrol

心已赠人/ 2022年03月17日 16:28/ 0 赞/ 377 阅读

相关 iframe自适应高度（转）

iframe自适应高度 ![此博文包含图片][sg_trans.gif](2013-04-23 17:29:49) <table> <tbody> <tr>

比眉伴天荒/ 2022年01月05日 05:51/ 0 赞/ 410 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 573 阅读