我需要一个解决方案来自动调整andwidth以height勉强iframe适应它的内容。iframe关键是加载后可以更改宽度和高度。我想我需要一个事件操作来处理 iframe 中包含的主体尺寸的变化。
问问题
790041 次
33 回答
298
<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>
于 2009-05-04T09:33:39.443 回答
63
嵌入的单线解决方案：从最小尺寸开始并增加内容尺寸。不需要脚本标签。
<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>于 2015-07-20T09:38:18.727 回答
37
到目前为止给出的所有解决方案都只考虑一次调整大小。您提到您希望能够在修改内容后调整 iFrame 的大小。为此，您需要在 iFrame 内执行一个函数（一旦内容发生更改，您需要触发一个事件来说明内容已更改）。
我被这个问题困扰了一段时间，因为 iFrame 内的代码似乎仅限于 iFrame 内的 DOM（并且无法编辑 iFrame），并且在 iFrame 外执行的代码被 iFrame 外的 DOM 卡住（并且不能t 拾取来自 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>
于 2012-06-15T10:05:33.137 回答
30
如果 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>
于 2012-08-01T15:17:59.777 回答
16
如果您不想使用 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;
}
于 2011-01-17T12:29:11.790 回答
8
我正在使用此代码在页面上加载所有 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();
});
于 2012-10-01T11:27:54.553 回答
8
在我尝试了地球上的一切之后，这对我来说真的很有效。
索引.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>
于 2016-04-07T15:18:38.507 回答
5
这是一个可靠的解决方案
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>
于 2013-11-06T03:09:57.430 回答
3
我在上面稍微修改了 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>
为我工作，但不确定跨浏览器功能。
于 2012-07-11T06:22:41.577 回答
3
经过一些实验，我想出了另一个解决方案。我最初尝试了标记为这个问题的“最佳答案”的代码，但它没有用。我的猜测是因为我当时程序中的 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 个或更多像素才能删除滚动条（iframe 的一些奇怪的错误/效果）。宽度更奇怪，你可以安全地将 18px 添加到 body 的宽度。还要确保您已应用 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 中）。我还有更多的测试要做，所以请告诉我这对你有用。
于 2015-06-17T04:08:51.070 回答
3
如果您可以同时控制 IFRAME 内容和父窗口，那么您需要iFrame Resizer。
该库支持自动调整相同和跨域 iFrame 的高度和宽度，以适应其包含的内容。它提供了一系列功能来解决使用 iFrame 时最常见的问题，其中包括：
- 将 iFrame 的高度和宽度调整为内容大小。
- 适用于多个和嵌套的 iFrame。
- 跨域 iFrame 的域身份验证。
- 提供一系列页面大小计算方法来支持复杂的 CSS 布局。
- 使用 MutationObserver 检测可能导致页面调整大小的 DOM 更改。
- 检测可能导致页面调整大小的事件（窗口调整大小、CSS 动画和过渡、方向更改和鼠标事件）。
- 通过 postMessage 简化 iFrame 和主机页面之间的消息传递。
- 修复 iFrame 中的页面链接并支持 iFrame 和父页面之间的链接。
- 提供自定义大小和滚动方法。
- 向 iFrame 公开父位置和视口大小。
- 与 ViewerJS 一起使用以支持 PDF 和 ODF 文档。
- 回退支持到 IE8。
于 2018-01-13T11:35:34.630 回答
3
语境
我必须在网络扩展的背景下自己做这件事。这个网络扩展在每个页面中注入了一些 UI，这个 UI 存在于iframe. 里面的内容iframe是动态的，所以我不得不重新调整它本身的宽度和高度iframe。
我使用React，但这个概念适用于每个库。
我的解决方案（假设您同时控制页面和 iframe）
在里面iframe我改变了body样式以具有非常大的尺寸。这将允许内部元素使用所有必要的空间进行布局。制作widthand height100% 对我不起作用（我猜是因为 iframe 有一个默认值width = 300pxand height = 150px）
/* something like this */
body {
width: 99999px;
height: 99999px;
}
然后我将所有 iframe UI 注入到一个 div 中并给它一些样式
#ui-root {
display: 'inline-block';
}
在此内部渲染我的应用程序后#ui-root（在React中，我在内部执行此操作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)
于 2018-09-06T13:05:25.900 回答
2
使用上述方法都无法正常工作。
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>
环境：IE 10、Windows 7 x64
于 2013-12-19T03:46:09.157 回答
1
可以制作一个“类似幽灵”的 IFrame，就像它不存在一样。
见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/
基本上，您使用https://developer.mozilla.org/en-US/docs/DOM/window.postMessageparent.postMessage(..)中描述
的事件系统
这适用于所有现代浏览器！
于 2013-02-22T13:03:03.403 回答
1
我发现这个调整器效果更好：
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;
}
请注意，样式对象已被删除。
于 2014-08-13T06:46:17.853 回答
1
万一有人来到这里：当我从 iframe 中删除 div 时，我遇到了解决方案的问题 - iframe 并没有变短。
有一个 Jquery 插件可以完成这项工作：
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
于 2014-12-17T00:23:26.007 回答
1
在 jQuery 中，这对我来说是最好的选择，这对我很有帮助！！我等着帮你！
框架
<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>
于 2017-02-08T06:42:00.823 回答
1
显然有很多场景，但是，我的文档和 iframe 具有相同的域，并且我能够将其附加到 iframe 内容的末尾：
var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';
这会“找到”父容器，然后将长度设置为 50 像素的软糖因子以移除滚动条。
没有任何东西可以“观察”文档高度的变化，我的用例不需要这个。在我的回答中，我确实带来了一种引用父容器的方法，而不使用烘焙到父/iframe 内容中的 id。
于 2019-04-10T09:58:01.287 回答
1
如果您可以使用固定的纵横比并且想要响应式 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>
源代码基于这个站点，Ben Marshall有一个很好的解释。
于 2020-03-03T19:28:51.093 回答
1
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%";
}
}
伊夫拉姆风格：
.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>
于 2020-07-01T08:19:50.900 回答
0
这就是我的做法（在 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>
于 2013-05-14T10:27:59.297 回答
0
这里有几种方法：
<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%，这会强制滚动条在页面之外，并且由于正文没有t 有滚动条人们可能不会期望 iframe 超出页面的边界。这会以全宽隐藏 iFrame 的滚动条！
来源：设置iframe 自动高度
于 2013-06-27T12:32:32.617 回答
0
我知道这篇文章很旧，但我相信这是另一种方法。我刚刚在我的代码上实现了。在页面加载和页面调整大小时都可以完美运行：
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();
});
于 2015-09-12T16:29:44.347 回答
0
要放置在标题中的 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;
}
于 2016-02-27T05:55:23.667 回答
0
对于 angularjs 指令属性：
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
于 2017-12-23T18:04:39.207 回答
0
这就是我在加载或事情发生变化时的方式。
parent.jQuery("#frame").height(document.body.scrollHeight+50);
于 2018-07-22T15:53:37.063 回答
0
如果您正在寻找无 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>
于 2021-08-29T13:07:34.143 回答
0
我在这里阅读了很多答案，但几乎每个人都给出了某种跨域框架块。
示例错误：
未捕获的 DOMException：阻止具有源“null”的框架访问跨域框架。
相关线程中的答案也是如此：
我也不想使用第三方库iFrame Resizer或类似库。
@bboydflo 的答案很接近，但我错过了一个完整的例子。https://stackoverflow.com/a/52204841/3850405
我正在使用width="100%"，iframe但代码也可以修改为使用宽度。
这就是我解决设置自定义高度的方法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但仅使用HTMLand 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仅当内容嵌入 a 时才激活，iframe并且postMessage仅在高度更改时发送消息。
您可以在此处阅读更多信息Window.postMessage()，但描述非常适合我们想要实现的目标：
window.postMessage() 方法可以安全地启用 Window 对象之间的跨域通信；例如，在页面和它生成的弹出窗口之间，或者在页面和嵌入其中的 iframe 之间。
通常，当且仅当它们源自的页面共享相同的协议、端口号和主机（也称为“同源策略”）时，才允许不同页面上的脚本相互访问。window.postMessage() 提供了一种受控机制来安全地规避此限制（如果使用得当）。
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
如果你想要 100% 的宽度和高度，iframe我会这样做：
<!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>
来源：
于 2021-09-17T15:12:33.557 回答
-1
简单：
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);
});
于 2016-07-21T08:15:47.463 回答
-1
<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>
于 2016-09-09T03:02:38.850 回答
-1
如果内容只是很简单的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;
}
于 2018-04-23T18:05:51.390 回答
-6
<iframe src="..." style="border:none; width:100%; height: 100vh;"></iframe>
于 2020-07-27T19:20:15.673 回答