当前位置:首页 > 网站运营 > 正文内容

iframe高度自适应的一个方法

葱子8年前 (2017-09-20)网站运营1702

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用iframe框架来实现。 有个问题就是,目标页面的高度是动态调整的,非固定的。 在网上搜索了下,找个一个不错的解决方法,使用js来实现,具体实现代码如下:

1、js代码:


<script>function setIframeHeight(iframe) { if (iframe) { 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')); };</script>  


2、html代码如下:

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
以上代码参考这篇文章,这篇文章里同时提到了其他几个方法,感兴趣的可以看下。 http://caibaojian.com/iframe-adjust-content-height.html

扫描二维码推送至手机访问。

版权声明:本文由葱子博客发布,如需转载请注明出处。

本文链接:https://www.aitiancheng.com/article-1362.html

相关文章

wdcp_v3.2正式版发布了:支持多版本php共存和HTTPS设置

wdcp_v3.2正式版发布了:支持多版本php共存和HTTPS设置

经过近两周多时间的内测,wdcp_v3.2正式版本,终于可以和大家见面了 在此,感谢那些参与内测的小伙伴们,有你们的参与,wdcp必将更加完美 v3.2版本,最大的亮点,自然是大家期待以久的两大功能...

详解WDCP3.2.8自动配置HTTPS功能

详解WDCP3.2.8自动配置HTTPS功能

wdcp最新版3.2.8已经支持在后台直接配置HTTPS了,不过很多站长似乎不太会使用这个功能。 下面我就简单的给大家讲解下如何使用这个功能: 一、新建网站 在wdcp...

wcdp下phpmyadmin无法正常使用的问题解决办法

wcdp下phpmyadmin无法正常使用的问题解决办法

在使用wdcp管理面板过程中,你是否遇到过种问题? 从wdcp后台进入phpmyadmin,提示如下错误: 这里提供一种解决方法: 1、首先进入wdcp找到MySQL管...

寂寞河社区完成https改造 顺利通过百度站长https认证

寂寞河社区完成https改造 顺利通过百度站长https认证

寂寞河社区是我的一个客户的运营项目,主要是图片交流社区。 客户的需求主要有几点: 1、服务器环境配置: discuz是基于php的应用,所以需要配置php的运行环境。 在这次配置中,我采用了IIS+PHP5....

为你的阿里云ECS配置安全组规则,为服务器安全加把锁

为你的阿里云ECS配置安全组规则,为服务器安全加把锁

我们在使用虚拟主机的时候是看不到服务器被攻击情况的,但是一旦我们更换为ECS服务器后,每天都会有人在扫描、试探、攻击你的服务器,虽说暂时没有带来较大的影响。但是,始终心里有点发毛。 阿里云ECS后台显示的被攻击截图 还好阿里云后台提供...

常用云服务器主机管理面板推荐

常用云服务器主机管理面板推荐

在之前【对于新建discuz网站的一些建议:X3.4、服务器、HTTPS】这篇文章中,葱子我给大家讲过在新建站点时尽量使用云服务器,同时可以通过使用服务器面板来管理云服务器,实现可视化操作。 下面葱子给大家介绍一下云服务器的一些使用指南。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。