gpt4 book ai didi

javascript - 如何根据其内容的高度调整 iframe 的高度?

转载 作者:行者123 更新时间:2023-11-28 13:59:39 25 4
gpt4 key购买 nike

如何根据内容的高度调整 iframe 的高度?我已经阅读了 stackoverflow 中的其他答案。但这些答案对我不起作用。我在 index.html 中有 3 个 iframe。我想调整id为myIframe的第二个iframe的高度。这是我的 index.html(该代码在 Internet Explorer 中有效,但在 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>

我的 header.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>

about.html 和 contact.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。

我完全不明白第二个错误。

最佳答案

两个问题

  1. 您需要将脚本移动到 iframe 之上

  2. 您需要实际加载一些内容(将 src="someURL"添加到您尝试使用的 iframe)

see this glitch

关于javascript - 如何根据其内容的高度调整 iframe 的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57941787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com