我需要一个自动调整iframe的宽度和高度的解决方案，以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理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>
其他回答
嵌入式的一行程序解决方案: 从最小大小开始，增加到内容大小。不需要脚本标记。
<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%;" > < / iframe >
到目前为止给出的所有解决方案都只考虑一次调整大小。您提到希望能够在修改内容后调整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>
我在这里读了很多答案，但几乎每个人都给出了一些交叉起源的框架块。
错误示例:
未捕获的DOMException:阻止了一个原点为“null”的帧 访问跨原点框架。
在相关线程中的答案也是一样的:
使iframe自动调整高度根据内容而不使用滚动条?
我不想使用第三方库，如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源代码，示例来自创建React应用程序，但只使用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()的内容，但描述非常适合我们想要实现的目标:
The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it. Normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy"). window.postMessage() provides a controlled mechanism to securely circumvent this restriction (if used properly).
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
如果你想为iframe设置100%的宽度和高度，我会这样做:
<!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
显然有很多场景，但是，我有相同的域文档和iframe，我能够将此附加到我的iframe内容的末尾:
var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';
这将“找到”父容器，然后设置长度加上50像素的模糊因子以删除滚动条。
这里没有任何东西可以“观察”文档高度的变化，这在我的用例中是不需要的。在我的回答中，我带来了一种引用父容器而不使用父/iframe内容中的id的方法。
使用bootstrap的嵌入响应类，它最初是为youtube视频，但你可以调整它的高度。
如果你不能使用javascript，我建议使用引导和玩周围的嵌入响应-***类的html。我能够通过添加填充底部作为百分比来实现同样的效果，从而进一步相应地调整它。
<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>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
