iframe高度自适应

最新推荐文章于 2024-09-29 16:33:00 发布

Study_Live_Sun

最新推荐文章于 2024-09-29 16:33:00 发布

阅读量129

点赞数

分类专栏：前端文章标签：资料

本文链接：https://blog.csdn.net/Study_Live_Sun/article/details/84988940

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了一种在iframe内容未知但高度可预测的情况下调整其高度的方法。通过设置CSS的min-height值并结合JavaScript代码，可以实现iframe内容高度的自动调整，确保页面布局的整洁和美观。

摘要由CSDN通过智能技术生成

原文链接：http://caibaojian.com/iframe-adjust-content-height.html

iframe内容未知，高度可预测

这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。常用的兼容代码有：·

//code from http://caibaojian.com/iframe-adjust-content-height.html

// document.domain = "caibaojian.com";
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'));

参考网址：http://caibaojian.com/iframe-adjust-content-height.html