Javascript怎么使iframe自适应高度

发布时间:2021-11-20 11:52:11 作者:iii
来源:亿速云 阅读:151

这篇文章主要介绍“Javascript怎么使iframe自适应高度”,在日常操作中,相信很多人在Javascript怎么使iframe自适应高度问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Javascript怎么使iframe自适应高度”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

工作中我们遇到了iframe嵌入页面高度自适应的问题。因为我们不知道所加载的iframe内容页面会有多高,又不想在页面上出现难看的滚动条,这个时候我们可以使用Javascript来动态让iframe自适应高度。

准备工作

我们准备一个主页面a.html,以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html,内容可以自己随便加,实际应用中可能是后台生成的内容。

为了演示,我们在主页面a.html中加入如下代码:

<p class="opt_btn"> <button onclick="getData('iframeH');">加载内容1</button> <button onclick="getData('iframeH2');">加载内容2</button> </p> <iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)"></iframe>

我们要实现的是,分别点击两个按钮,iframe中加载不同的内容,iframe中不能出现滚动条。

Javascript

首先我们使用Javascript动态改变iframe的src值,即分别点击两个按钮时,iframe加载不同的页面内容。代码中按钮button分别调用了自定义函数getData()就实现了切换内容的效果。

function getData(ifm){ document.getElementById("ifrm").src = ifm+'.html'; }

然后,我们来关注iframe里的内容,因为我们事先不知道iframe的内容高度,如果先设置好iframe的高度height值,很可能当页面内容超长时会出现滚动条,这不是我们想要的。那么我们使用Javascript来动态获取iframe页面高度,然后设置iframe的高度。

在iframe完全加载后即onload,调用setIframeHeight(),iframe内容加载完成后,可获取iframe的高度值,然后重新设置iframe的高度,以下是整理好的代码:

function setIframeHeight(id) {    var ifrm = document.getElementById(id);    var doc = ifrm.contentDocument? ifrm.contentDocument:        ifrm.contentWindow.document;    ifrm.style.visibility = 'hidden';    ifrm.style.height = "10px"; // reset to minimal height ...    ifrm.style.height = getDocHeight( doc ) + 4 + "px";    ifrm.style.visibility = 'visible'; } function getDocHeight(doc) {    doc = doc || document;    var body = doc.body, html = doc.documentElement;    var height = Math.max( body.scrollHeight, body.offsetHeight,        html.clientHeight, html.scrollHeight, html.offsetHeight );    return height; }

到此,关于“Javascript怎么使iframe自适应高度”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. iframe 跨域自适应高度
  2. iframe自适应高度的插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript iframe

上一篇:ORACLE如何审计

下一篇:如何使用Oracle表空间设计提升数据库性能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》