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

iframe高度自适应的一个方法

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

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

相关文章

百度主动推送怎么用_百度主动推送PHP演示代码分享

近期在搜外问答上看到有很多人咨询百度主动推送API接口怎么调用的问题,看了很多回答内容,并没有讲到本质上。 虽然百度站长平台有提供类似的接口调用演示,但是对于基础比较薄弱的站长来讲,还是不会使用。 今天葱子给大家提供一份百度主动推送PH...

wordpress博客从虚拟主机搬家到独立ECS服务器的教程

wordpress博客从虚拟主机搬家到独立ECS服务器的教程

我的这个博客在2017年4月10日前是搭建在阿里云虚拟主机上面的,虚拟主机的特点就是稳定,不需要自己做过多的配置,适合访问量不大,对环境要求不高的网站。 现在我尝试做我的wordpress博客做下https,在阿里云虚...

如何在电脑上访问手机页面?试试这个chrome插件

如何在电脑上访问手机页面?试试这个chrome插件

有时候需要在PC电脑上网访问下手机页面,每次都要去打开手机,有点小麻烦。 这里葱子我分享给大家一个chrome插件,直接安装在chrome浏览器上就可以访问手机页面了。 怎么使用:看截图,一目了然。...

小云APP 修改Android包名(packagname)教程!

小云APP 修改Android包名(packagname)教程!

修改包名 (packagname) 将会导致:客户端的分享、支付、第三方登录、应用市场更新 等功能出现问题。如非新建应用,绝不推荐使用该功能。 修改包名要用到证书(keystore),制作证书的方法有很多,下面介绍我所知...

你的服务器还在裸奔?做好这6点,服务器才算安全了!

你的服务器还在裸奔?做好这6点,服务器才算安全了!

近期葱子接到很多站长的求助,服务器被黑,网站被挂马,快照被劫持等等。 在这里,葱子给大家讲下加强服务器和网站安全的方法。 一、关闭不常用的服务器端口 1、我们常用的端口一般有:FTP-21、SSH(22)、远程桌面(3389)、h...

能在windows系统下用的服务器主机面板推荐

能在windows系统下用的服务器主机面板推荐

虽然现在Linux系统在服务器领域的普及度是越来越高,不过还是有很多站长选择使用windows系统作为服务器操作系统。 但是windows自带的IIS等服务器环境使用起来非常的不方便,效率还不高,于是便有了众多的第三方服务器面板程序。...

发表评论

访客

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