欢迎您光临珠海腾亿网络科技有限公司!
电话图标 全国热线:4008-567-169 珠海:0756-8129372

新闻动态

将想法与焦点和您一起共享

主页 > 新闻动态 > 建站知识 >

如何设置iframe高度自适应,iframe高度自适应有哪些方法

发表日期:2019-03-20 12:40 文章编辑:admin 浏览次数:

腾亿网络(珠海做网站)腾亿小编最近在看见公司技术在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。

技术员第一使用的方法就是使用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://www.beianidc.cn/jianzhanzhishi/82.html
标签:建站知识
将文章分享到..
相关新闻
最新新闻
随机新闻
最新网站设计案例
  • 我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站优化、百度排名、电子商务、移动互联网营销、系统平台开发,等服务范围涵盖基础的域名服务、主机服务;云服务器、服务器租用托管、机柜出租、大带宽业务、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +我们的优势

  • 更多 +关于腾亿网络

    腾亿网络一直秉承专业、诚信、服务、进取的价值观,坚持优秀的商业道德,以用户价值为导向,向用户提供优质产品和优质服务,从而赢得了用户的信赖。腾亿网络始终以不懈的努力、更高的目标来要求自己。

Copyright ? 2012-2019 Beianidc Technology Co., LTD. All Rights Reserved.    粤ICP备17125489号-6