如何根据内容的高度调整 iframe 的高度？我已经在堆栈溢出中阅读了其他答案。但这些答案对我不起作用。我在索引中有 3 个 iframe.html。我想调整 id 为 myIframe 的第二个 iframe 的高度。这是我的索引.html(代码在IE浏览器中有效，但在chrome和Firefox中不起作用(：
<!DOCTYPE html>
<html>
<body>
<div style="display: flex; flex-direction: column; align-items: stretch;">
<iframe src="header.html" scrolling="no" style="width: 100%;border: 0;
height:50px"></iframe>
<iframe class="" id="myIframe" onload = "changeheight()"
name="a" scrolling="no" style="border:none; width: 100%; min-
height:calc(100vh - 115px);" allowtransparency="true" allowfullscreen>
</iframe>
<iframe src="footer.html" scrolling="no" style="width: 100%;border: 0;
height:50px;"></iframe>
</div>
<script type='text/javascript'>
function changeheight() {
document.getElementById('myIframe').style.height =
document.getElementById('myIframe').contentWindow.document.body.scrollHeight
+ 'px';
}
</script>
</body>
</html>
我的标题.html是
<!DOCTYPE html>
<html>
<body>
<header style="padding: 20px; background: pink">
<a target="a" href="about.html">About us</a>
<a target="a" href="contact.html">Contact us</a>
</header>
</body>
</html>
关于.html和联系人.html包含一些虚拟数据。
我在控制台的chrome中收到这两个错误-
index.html:22 Uncaught ReferenceError: changeheight is not defined
at HTMLIFrameElement.onload (index.html:22)
index.html:82 Uncaught DOMException: Blocked a frame with origin "null" from
accessing a cross-origin frame.
我不明白为什么我会收到第一个错误。我已经在javascript中定义了changeheight。
我完全不明白第二个错误。
两个问题
-
您需要将脚本移动到 iframe 上方
-
您需要实际加载一些内容(将src="someURL"添加到您尝试使用的iframe中(
看到这个故障