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

iframe高度自适应的一个方法

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

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

相关文章

苹果ATS特性服务器配置指南

苹果ATS特性服务器配置指南

  配置指南: 需要配置符合PFS规范的加密套餐,目前推荐配置:ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD...

windows server2008下使用IIS7配置 web.config 实现 Discuz! X3.2的伪静态

windows server2008下使用IIS7配置 web.config 实现 Discuz! X3.2的伪静态

首先确认下你的IIS中是否按照了URL重写模块。如果没有安装,就需要安装下URL重写模块。 1. 安装URL Rewrite模块 首先从官网下载安装URL Rewrite Modu...

如何关闭445端口?比特币勒索445端口关闭的方法教程

如何关闭445端口?比特币勒索445端口关闭的方法教程

445端口怎么关闭,这2天被比特币勒索刷屏了,WanaCrypt0r 2.0勒索软件在无需用户任何操作的情况下,Wcry2.0即可扫描开放445文件共享端口的Windows机器,从而植入恶意程序。那么只要关闭电脑的445端口就可以解决...

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

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

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

centos(Linux)系统如何挂载数据盘

centos(Linux)系统如何挂载数据盘

大部分的网站服务器都是使用的centos作为服务器程序,一旦磁盘空间爆满,就需要更换更大的硬盘。不过现在很多IDC服务商已经支持挂载数据盘了。 下面以阿里云ECS服务器为例,开始讲解centos如何挂载数据盘。...

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

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

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

发表评论

访客

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