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

iframe高度自适应的一个方法

葱子9年前 (2017-09-20)网站运营1934

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用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

相关文章

案例分享:创意思想网整体搬家到阿里云ECS服务器并配置全站https

近期服务了一位客户,在这里具体给大家讲下实施过程。 一、客户网站介绍: 创意思想网基于discuz X3.2,搬家前搭建在阿里云虚拟主机上。 二、本次服务的主要目的有: 1、配置ECS服务器环境:基于w...

网页广告被劫持怎么办?是时候为你的网站开启https访问了

网页广告被劫持怎么办?是时候为你的网站开启https访问了

今天葱子在查看收藏大家坛手机端网页的时候,发现文章页面怎么多了这么多的广告位。 看下图:整个页面上出现了四处广告位。其中只有标记为“4”的地方是站长自己设置的广告。其余三处都不是就站长自己设置的。...

阿里云ECS服务器安装安全狗提示未安装locate和dmidecode的解决办法

阿里云ECS服务器安装安全狗提示未安装locate和dmidecode的解决办法

最近在阿里云的ECS服务器老是被攻击,不得已给服务器安装了安全狗。 由于我使用的是centos6.5纯净版系统,在安装安全狗的过程中,总是提示缺少组件支持。 所以收集了以下解决方法...

通过nginx目录跳转实现:将旧栏目URL跳转到新栏目URL

近期我的古玩收藏网站——收藏大家坛做了搬家,同时也对现有的文章栏目布局做了一定的调整。 具体调整如下: 将以前的一级文章栏目全部转为二级文章栏目。 举例说明下:...

wdcp计划任务导致wdcp面板无法访问解决办法

wdcp计划任务导致wdcp面板无法访问解决办法

今天在设置wdcp的计划任务时,服务器重启后wdcp面板无法访问,尝试在ssh中重启wdcp,提示如下错误:env: /etc/init.d/wdcp: No such file or directory 尝试在百度中搜索查找解决方案后,...

”site域名后提示“危险网站”怎么办?这才是正确的解决姿势!

”site域名后提示“危险网站”怎么办?这才是正确的解决姿势!

站长们在使用site命令查询网站信息时会出现“危险网站”提示,这到底是怎么回事呢?又该如何解决? 一、为什么会提示“危险网站” 针对这个问题,百度方面表示,百度云加速使用的漏洞扫描器是企业级别扫描器,对站点安全要求更...

发表评论

访客

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