我已经尝试过他们回答的有关 iframe 自动高度问题的一些提示。
基本上，我想要的是根据 iframe 内内容的高度动态自动调整 iframe 的高度。
以下是我尝试过的具体方法。
Resizing an iframe based on content
iframe Auto Adjust Height as content changes
id为#iframe的iframe需要自动调整内容的高度，因此我将以下代码分别插入到父文档和iframe的主体中。
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('iframe').height = parseInt(height)+60;
}
</script>
并到 iframe
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'> </iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
这是我遇到问题的网站:http://xefrontier.com
(如果您单击“WALL”选项卡，iframe 就在那里。)
谁能帮我弄清楚为什么这些代码不起作用？ 谢谢。
最佳答案
该代码段当然无法运行，我只是将其放在那里以满足帖子要求。请阅读此README.md并查看 Plunker demo 。所有详细信息都在 README.md并发布在这里。
README.md
iFrame 动态高度
该演示在同源策略下工作，简单地说，父子页面必须位于同一位置:
- 相同协议(protocol) (http://)
- 相同子域 ( http://app .)
- 相同域名 ( http://app.domain.com )
相同端口 ( http://app.domain.com:80 )
有 3 个不同高度的子页面。
- iFrm1,html
- iFrm2.html
- iFrm3.html
当我们要控制 iframe 时，准备布局和 iframe 属性非常重要。
- 当我们通过满足同源政策的要求确定父页面和子页面的确切位置时，第一步就已经完成。
CSS:
/* Outer Container */
#iSec {
width: 100vw; /* As wide as your screen */
height: 100vh; /* As tall as your screen */
display: table;/* Will behave like a table */
}
/* iFrame Wrappers */
.jFrame {
position: relative; /* As a non-static element, any descendants can be easily positioned. */
max-height: 100%; /* Being flexible is important when dealing with dynamic content. */
max-width: 100%; /* see above */
overflow-y: auto; /* Scrollbars will appear when height exceeds the viewport (your screen)*/
display: table-cell; /* Will behave like a table-cell
}
/* iFrames */
iframe {
position: absolute; /* Easily positioned within it's parent (`.jFrame`)*/
width: 100%; /* Set the iFrames' attribute as well */
height: 100%; /* Set the iFrames' attribute as well */
top: 0; /* Streches iframes' edges */
left: 0;
bottom: 0;
right: 0;
}
iFrame:
<iframe id="iFrm1" src="iFrm1.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
我借用和修改的大部分代码来自 这个site
//将所有 iframe 收集到 NodeList 中，转换为数组，然后调用 iFrmHt()，并传递每个 iFrame 的 id。
function loadiFrames() {
var iFrmList = document.querySelectorAll('iframe');
var iFrmArray = Array.prototype.map.call(iFrmList, function(obj) {
var ID = obj.id;
iFrmHt(ID);
});
}
//引用目标iFrame的Document
function iFrmHt(ID) {
var iFrm = document.getElementById(ID);
var iDoc = iFrm.contentDocument || iFrm.contentWindow.document;
var iHt = function(iDoc) {
if (!iDoc) {
iDoc = document;
}
var iKid = iDoc.body;
var iRoot = iDoc.documentElement;
//确定iFrame的子页面--高度，有几种不同的测量方法。
var iHt = Math.max(iKid.scrollHeight, iKid.offsetHeight,
iRoot.clientHeight, iRoot.scrollHeight, iRoot.offsetHeight);
return iHt;
}
//改变iFrame的高度
iFrm.style.height = iHt + 'px';
console.log('iFrame: ' + iFrm.id);
console.log('height: ' + iHt(iDoc));
}
//如果您在窗口加载时加载，则 iFrame 不应出现任何超时。
window.onload = loadiFrames;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame Dynamic Height</title>
<style>
#iSec {
width: 100vw;
height: 100vh;
display: table;
}
.jFrame {
position: relative;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
display: table-cell;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<section id="iSec">
<div id="i1" class="jFrame">
<iframe id="iFrm1" src="iFrm1.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
</div>
<div id="i2" class="jFrame">
<iframe id="iFrm2" src="iFrm2.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
</div>
<div id="i3" class="jFrame">
<iframe id="iFrm3" src="iFrm3.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
</div>
</section>
<script>
function loadiFrames() {
var iFrmList = document.querySelectorAll('iframe');
var iFrmArray = Array.prototype.map.call(iFrmList, function(obj) {
var ID = obj.id;
iFrmHt(ID);
});
}
function iFrmHt(ID) {
var iFrm = document.getElementById(ID);
var iDoc = iFrm.contentDocument || iFrm.contentWindow.document;
var iHt = function(iDoc) {
if (!iDoc) {
iDoc = document;
}
var iKid = iDoc.body;
var iRoot = iDoc.documentElement;
var iHt = Math.max(iKid.scrollHeight, iKid.offsetHeight,
iRoot.clientHeight, iRoot.scrollHeight, iRoot.offsetHeight);
return iHt;
}
iFrm.style.height = iHt + 'px';
console.log('iFrame: ' + iFrm.id);
console.log('height: ' + iHt(iDoc));
}
window.onload = loadiFrames;
</script>
</body>
</html>关于javascript - iframe 自动调整其高度以适应内容高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35714160/