调整iframe的宽度和高度以适应其中的内容

小开

最佳答案

<script type="application/javascript">


function resizeIFrameToFitContent( iFrame ) {


iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}


window.addEventListener('DOMContentLoaded', function(e) {


var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );


// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );


</script>


<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

小开

跨浏览器jQuery插件。

跨浏览器，跨域library，使用mutationObserver来保持iFrame的大小与内容一致，使用postMessage来在iFrame和主机页面之间通信。使用或不使用jQuery。

小开

下面是一个跨浏览器的解决方案，如果你不想使用jQuery:

/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}

小开

到目前为止给出的所有解决方案都只考虑一次调整大小。您提到希望能够在修改内容后调整iFrame的大小。为此，您需要在iFrame中执行一个函数(一旦内容被更改，您需要触发一个事件来说明内容已更改)。

我被这个问题困扰了一段时间，因为iFrame内的代码似乎仅限于iFrame内的DOM(并且不能编辑iFrame)，而在iFrame外执行的代码则被iFrame外的DOM卡住(并且不能从iFrame内接收事件)。

解决方案来自于发现(通过同事的帮助)jQuery可以被告知使用什么DOM。在本例中，父窗口的DOM。

因此，这样的代码做了你所需要的(当在iFrame中运行时):

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>

小开

我稍微修改了上面Garnaph的解决方案。似乎他的解决方案根据事件发生前的大小修改了iframe的大小。对于我的情况(通过iframe提交电子邮件)，我需要在提交后立即改变iframe的高度。例如，在提交后显示验证错误或“谢谢”消息。

我只是消除了嵌套的click()函数，并将其放入我的iframe html:

<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>

对我来说有用，但不确定跨浏览器功能。

小开

如果iframe内容来自相同的域，这应该工作得很好。但是它确实需要jQuery。

$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});

要动态调整它的大小，你可以这样做:

<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

然后在iframe加载的页面上添加这个:

<script language="javaScript">
function resize()
{
window.parent.autoResize();
}


$(window).on('resize', resize);
</script>

小开

我使用这段代码自动调整所有iframe(类autoHeight)的高度，当他们加载在页面上。经过测试，它可以在IE, FF, Chrome, Safari和Opera中工作。

function doIframe() {
var $iframes = $("iframe.autoHeight");
$iframes.each(function() {
var iframe = this;
$(iframe).load(function() {
setHeight(iframe);
});
});
}


function setHeight(e) {
e.height = e.contentWindow.document.body.scrollHeight + 35;
}


$(window).load(function() {
doIframe();
});

小开

可以创建一个“幽灵般的”IFrame，就像它不存在一样。

看到http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

中描述的事件系统parent.postMessage(..) https://developer.mozilla.org/en-US/docs/DOM/window.postMessage < / p >

这适用于所有现代浏览器!

小开

这是我怎么做的(在FF/Chrome测试):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>


<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

小开

这里有几种方法:

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

还有另一种选择

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

隐藏滚动与2个替代方案如上所示

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

使用第二代码进行破解

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

为了隐藏iFrame的滚动条，父元素被设置为“overflow:hidden”来隐藏滚动条，iFrame的宽度和高度被设置为150%，这迫使滚动条在页面之外，由于主体没有滚动条，人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!

来源:set Iframe自动高度

小开

这是一个坚固的解决方案

function resizer(id)
{


var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;


var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );


document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;


}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

小开

以上方法均不能工作。

javascript:

function resizer(id) {
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;


var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);


document.getElementById(id).style.height = height;
document.getElementById(id).style.width = width;


}

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
<input id="txtHeight"/>height     <input id="txtWidth"/>width
<iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
<iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
<iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

小开

我发现这个调整器工作得更好:

function resizer(id)
{


var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;


var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );


document.getElementById(id).height = height;
document.getElementById(id).width = width;


}

注意，样式对象被删除了。

小开

以防有人到这里: 当我从iframe中删除div时，我有一个解决方案的问题- iframe没有变得更短

有一个Jquery插件，做的工作:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

小开

经过一番试验，我想出了另一个解决办法。我最初尝试了标记为“最佳答案”的代码来回答这个问题，但它不起作用。我的猜测是因为当时程序中的iframe是动态生成的。下面是我使用的代码(它对我有用):

正在加载的iframe中的Javascript:

window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};

有必要在高度上增加4个或更多像素来移除滚动条(一些奇怪的bug/ iframes的效果)。宽度更奇怪，你可以安全地添加18px的宽度的主体。还要确保应用了iframe主体的css(如下所示)。

html, body {
margin:0;
padding:0;
display:table;
}


iframe {
border:0;
padding:0;
margin:0;
}

下面是iframe的html:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

以下是我的iframe中的所有代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>File Upload</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
display:table;
}
</style>
<script type="text/javascript">
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
</script>
</head>
<body>
This is a test.<br>
testing
</body>
</html>

我在chrome和firefox (windows xp)中做过一些测试。我还有更多的测试要做，所以请告诉我这是如何为你工作的。

小开

嵌入式一行程序解决方案: 从最小大小开始，增加到内容大小。

.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

小开

我知道这个帖子很旧了，但我相信这是另一种方式。我在我的代码中实现了。完美的工作在页面加载和页面大小调整:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;


function resizeIframe(){
videoHeight = $('.video-container').height();//iframe parent div's height
videoWidth = $('.video-container').width();//iframe parent div's width


iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();




$(window).on('resize', function(){
resizeIframe();
});

小开

Javascript被放置在头文件:

function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

下面是iframe html代码:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Css样式表

>

.spec_iframe {
width: 100%;
overflow: hidden;
}

小开

在我试遍了世界上所有的方法之后，这个方法真的很适合我。

index . html

<style type="text/css">
html, body{
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>


<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

小开

简单性:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

小开

<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

小开

在jQuery中，这是我最好的选择，这真的帮助了我!!我等待着帮助你!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>
var valueSize = $( "#iframe" ).offset();
var totalsize = (valueSize.top * 2) + valueSize.left;


$( "#iframe" ).height(totalsize);


</script>

小开

对于angularjs的directive属性:

G.directive ( 'previewIframe', function () {
return {
restrict : 'A',
replace : true,
scope : true,
link : function ( scope, elem, attrs ) {
elem.on ( 'load', function ( e ) {
var currentH = this.contentWindow.document.body.scrollHeight;
this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
} );
}
};
} );

注意百分比，我插入它，这样你可以对抗缩放通常做的iframe，文本，广告等，简单地放0如果没有缩放是实现

小开

如果你可以控制IFRAME内容和父窗口，那么你需要iFrame调整。

这个库允许自动调整相同域和跨域iframe的高度和宽度，以适应它们所包含的内容。它提供了一系列功能来解决使用iFrames时最常见的问题，包括:

将iFrame的高度和宽度调整为内容大小。
工作与多个和嵌套的iframe。
跨域iframe的域认证。
提供一系列页面大小计算方法，以支持复杂的CSS布局。
使用MutationObserver检测可能导致页面调整大小的DOM更改。
检测事件，可以导致页面调整大小(窗口调整大小，CSS动画和过渡，方向变化和鼠标事件)。
通过postMessage简化iFrame和主机页面之间的消息传递。
修复了iFrame中的页面链接，并支持iFrame和父页面之间的链接。
提供自定义大小和滚动方法。
将父位置和视口大小暴露给iFrame。
使用ViewerJS支持PDF和ODF文档。
回退支持到IE8。

小开

如果内容只是一个非常简单的html，最简单的方法是用javascript删除iframe

HTML代码:

<div class="iframe">
<iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Javascript代码:

function removeIframe(obj) {
var iframeDocument = obj.contentDocument || obj.contentWindow.document;
var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
obj.remove();
document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

小开

这是onload或当事情发生变化时我是怎么做的。

parent.jQuery("#frame").height(document.body.scrollHeight+50);

小开

上下文

我不得不在网络扩展的环境中自己做这件事。这个web扩展将一些UI注入到每个页面中，这个UI位于iframe中。iframe内部的内容是动态的，所以我必须重新调整iframe本身的宽度和高度。

我使用反应，但这个概念适用于每个库。

我的解决方案(这假设您同时控制页面和iframe)

在iframe中，我改变了body样式，使其具有真正大的维度。这将允许内部元素布局使用所有必要的空间。使width和height 100%不适合我(我猜是因为iframe有一个默认的width = 300px和height = 150px)

/* something like this */
body {
width: 99999px;
height: 99999px;
}

然后我把所有的iframe UI注入到一个div中，并给它一些样式

#ui-root {
display: 'inline-block';
}

在这个#ui-root中渲染我的应用程序后(在反应中，我在componentDidMount中这样做)，我计算这个div的尺寸，并使用window.postMessage将它们同步到父页:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')

在父框架中，我这样做:

window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)

小开

显然有很多场景，但是，我有相同的域文档和iframe，我能够将此附加到我的iframe内容的末尾:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

这将“找到”父容器，然后设置长度加上50像素的模糊因子以删除滚动条。

这里没有任何东西可以“观察”文档高度的变化，这在我的用例中是不需要的。在我的回答中，我带来了一种引用父容器而不使用父/iframe内容中的id的方法。

小开

如果你可以接受固定长宽比并且你想要响应iframe，这段代码将对你有用。这只是CSS规则。

.iframe-container {
overflow: hidden;
/* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16=
0.5625) */
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

iframe必须有一个div作为容器。

<div class="iframe-container">
<iframe src="http://example.org"></iframe>
</div>

源代码是基于这个网站和本•马歇尔有一个很好的解释。

小开

function resizeIFrameToFitContent(frame) {
if (frame == null) {
return true;
}


var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;


if (isFirefox && frame.contentDocument != null) {
docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
docEl = frame.contentWindow.document.body;
}


if (docEl == null) {
return;
}


var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));


frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
frame.height = maxHeight;
frame.style.height = frame.height + "px";
} else {
frame.style.height = "100%";
}


if (maxWidth > 0) {
frame.width = maxWidth;
frame.style.width = frame.width + "px";
} else {
frame.style.width = "100%";
}
}

ifram风格:

.myIFrameStyle {
float: left;
clear: both;
width: 100%;
height: 200px;
padding: 5px;
margin: 0px;
border: 1px solid gray;
overflow: hidden;
}

iframe标签:

<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>

脚本标签:

<script type="text/javascript">
$(document).ready(function () {
$('myIFrame').load(function () {
resizeIFrameToFitContent(this);
});
});
</script>

小开

<iframe src="..." style="border:none; width:100%; height: 100vh;"></iframe>

小开

如果你正在寻找一个没有jQuery跨起源的解决方案，你可能想看看我的想法:

<main id="container"></main>
<script>
fetch('https://example.com').then(response => {
return response.text();
}).then(data => {
const iframeContainer = window.document.getElementById('container');
const iframe = document.createElement('iframe');
iframe.frameBorder = 'none';
iframe.width = '100%';
iframe.addEventListener("load", function() {
iframe.height = iframe.contentWindow.document.body.scrollHeight;
})
const finalHtml = data;
const blob = new Blob([finalHtml], {type: 'text/html'});
iframe.src = window.URL.createObjectURL(blob);
iframeContainer.appendChild(iframe);
})
</script>

小开

我在这里读了很多答案，但几乎每个人都给出了一些交叉起源的框架块。

错误示例:

Uncaught DOMException: Blocked a frame with origin "null"从
.访问跨原点帧

在相关线程中的答案也是一样的:

使iframe自动调整高度根据内容不使用滚动条?< / >

我不想使用第三方库，如iFrame Resizer或类似的库。

来自@bboydflo的答案很接近，但我缺少一个完整的示例。https://stackoverflow.com/a/52204841/3850405

我对iframe使用width="100%"，但代码也可以修改为使用width。

这就是我如何解决为iframe设置自定义高度的问题:

嵌入式iframe:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="Web site" />
<title>Test with embedded iframe</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<iframe id="ifrm" src="https://localhost:44335/package/details?key=123" width="100%"></iframe>
<script type="text/javascript">
window.addEventListener('message', receiveMessage, false);


function receiveMessage(evt) {
console.log("Got message: " + JSON.stringify(evt.data) + " from origin: " + evt.origin);
// Do we trust the sender of this message?
if (evt.origin !== "https://localhost:44335") {
return;
}


if (evt.data.type === "frame-resized") {
document.getElementById("ifrm").style.height = evt.data.value + "px";
}
}
</script>
</body>
</html>

iframe source，来自Create React App的例子，但只使用了HTML和JS。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
//Don't run unless in an iframe
if (self !== top) {
var rootHeight;
setInterval(function () {
var rootElement = document.getElementById("root");
if (rootElement) {
var currentRootHeight = rootElement.offsetHeight;
//Only send values if height has changed since last time
if (rootHeight !== currentRootHeight) {
//postMessage to set iframe height
window.parent.postMessage({ "type": "frame-resized", "value": currentRootHeight }, '*');
rootHeight = currentRootHeight;
}
}
}
, 1000);
}
</script>
</body>
</html>

带有setInterval的代码当然可以修改，但它对动态内容非常有效。setInterval仅在内容嵌入iframe时激活，而postMessage仅在高度改变时发送消息。

你可以在这里阅读更多关于Window.postMessage()的内容，但是描述非常适合我们想要实现的目标:

window.postMessage()方法安全地启用了跨原点窗口对象之间的通信;例如，在一页和一页之间弹出它所衍生的，或者在页面和嵌入的iframe之间。< / p >
正常情况下，允许不同页面上的脚本相互访问当且仅当它们来自的页面共享相同的协议时，端口号和主机(也称为“同源策略”)。 window.postMessage()提供了一种安全的受控机制
.
.
.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

如果你想为iframe设置100%的width和height，我会这样做:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="Web site" />
<style>
body {
margin: 0; /* Reset default margin */
}


iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<title>Test with embedded iframe</title>
</head>
<body>
<iframe src="https://localhost:44335/package/details?key=123"></iframe>
</body>
</html>

来源:

https://stackoverflow.com/a/27853830/3850405 < a href = " https://stackoverflow.com/a/27853830/3850405 " > < / >

小开

使用bootstrap的embed-responsive类，它最初用于youtube视频，但你可以调整它的高度。

如果你不能使用javascript，我建议使用引导和玩embed-responsive-***类的html。我能够通过添加padding-bottom作为百分比来实现同样的效果，并进一步相应地调整它。

<span class="iframe embed-responsive embed-responsive-16by9" style="display:block; padding-bottom: 10%;">
<iframe class="embed-responsive-item" width="100%" scrolling="no" src="example.com" frameBorder="0" ></iframe>
</span>

小开

我不知道为什么每个人都只使用js

CSS fit-content可以解决这个问题

iframe{
height:fit-content;
width: fit-content;
}

小开

最简单的方法是设置iframe的高度，如果你知道文档的高度是什么，如果它是固定的。