Javascript 如何根据iframe内容的高度调整iframe的高度？_Javascript_Html_Css_Iframe_Flexbox

Javascript 如何根据iframe内容的高度调整iframe的高度？

javascript html css iframe

Javascript 如何根据iframe内容的高度调整iframe的高度？,javascript,html,css,iframe,flexbox,Javascript,Html,Css,Iframe,Flexbox,如何根据iframe内容的高度调整iframe的高度？我在stackoverflow中阅读了其他答案。但这些答案对我不起作用。我在index.html中有3个iFrame。我想调整id为myIframe的第二个iframe的高度。这是my index.html（该代码在internet explorer中可用，但在chrome和firefox中不可用）：我不明白为什么会出现第一个错误。我已经在javascript中定义了changeheight 我完全不理解第二个错误。两个问题您需要将脚本移

如何根据iframe内容的高度调整iframe的高度？我在stackoverflow中阅读了其他答案。但这些答案对我不起作用。我在index.html中有3个iFrame。我想调整id为myIframe的第二个iframe的高度。这是my index.html（该代码在internet explorer中可用，但在chrome和firefox中不可用）：

我不明白为什么会出现第一个错误。我已经在javascript中定义了changeheight

我完全不理解第二个错误。

两个问题

您需要将脚本移动到iframe上方

您需要实际加载一些内容（将src=“someURL”添加到您尝试使用的iframe中）

如果托管在同一个域中，您可以使用JS访问内容，返回其高度，然后将其设置为iframe。如果是外部的，则必须使用

postMessage

。问题是，您是否打算将页面的每个单独部分都设置为iframe？这听起来是一个非常糟糕的主意——几乎就像90年代使用

frameset

一样。有更好的解决方案可以把你的页面编译成一个页面，你应该尝试不同的方法。iframe最适合承载外部内容，而不仅仅是站点的部分内容……如果托管在同一个域上，您可以使用JS访问内容，返回其高度，然后将其设置为iframe。-是我干的。我已经编写了javascript代码。但它在chrome和firefox中不起作用。我被告知只制作一次网站的页眉和页脚。它将在所有页面中使用。我被告知不要每次创建新页面时都创建页眉和页脚。根据浏览器的不同，您应该以不同的方式访问内容窗口：-但最好使用

fetch

调用来获取页眉和页脚的内容，然后直接将其添加到页面中，而不是使用iFrame。你也应该考虑可访问性，所有这些框架都是一团糟，导航到视力受损的人，并使用辅助技术。但不是在我的电脑里。在我的计算机中，content.html的内容在底部被切断。有没有css或flexbox解决方案？没有css或flexbox解决方案。99.99%的网站使用的正常解决方案是在构建时或服务器上运行的模板系统。它们包括每页上的

header.template

和

footer.template

。您也可以使用客户端模板，但这意味着任何阻止JavaScript的人都无法读取您的页面。这通常也被认为对搜索引擎优化不利，但如果你愿意，你可以这样做。

<!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>

<!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>

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.