这篇文章主要介绍“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动态改变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自适应高度”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
