为什么本例中的 'scrollHeight' 被视为 'undefined'，为什么 iframe 在切换 html 文件时出现错误？

Question

这是我的第一个问题，如有错误请见谅...

我尝试使用 Apache2 在我的 Raspberry Pi 上使用 html、css 和 javascript 构建一个网站。所以我根据内容（来自 html 文件）编写了一个自动 iframe-height 功能脚本。此 html 文件已按按钮更改。

所以，我从我的资源管理器 (chrome) 那里得到这个错误：

Uncaught TypeError: Cannot read property 'scrollHeight' of undefined at HTMLIFrameElement.document.getElementById.onload

这是我的 javascript:

function setIframeHeight(iframe_obj) {
 var d = document.getElementById(iframe_obj).onload = function() {
 var this_body = d.body,
    html = d.documentElement;

 var height = Math.max( this_body.scrollHeight, this_body.offsetHeight,
     html.clientHeight, html.scrollHeight, html.offsetHeight );
     // whosebug.com/questions/1145850/
 obj.style.height = height + 'px';
 }
}

我尝试了很多此代码的变体，但每次都遇到相同的错误。

这是我的 html 脚本（只是一个领口）：

<html lang="de">
<head>
 <meta charset="utf-8">
 <script type="text/javascript" src="javascriptfunctions.js"></script>
 <link href="design.css" rel="stylesheet">
</head>

<body>
 <section>
  <iframe class="IframeClassSection" id="iframe-mainpage" src="/informationContainer/startseite.html" onload="setIframeHeight('iframe-mainpage');" scrolling="no"></iframe>
 </section>
</body>
</html>

最后 css class 用于该 iframe：

.IframeClassSection {
 display: block;
 background-color: orange;
 margin-left: 242px;
 margin-right: 200px;

 width: 718px;
 /* height: 2000px; */
 border: none;
 overflow: hidden;
}

使用此代码，我在重新加载页面时不会出错，只是在我尝试为 iframe 设置新的 html 位置时，如下所示：

<input class="SteuerungObenButton" type="button" value="Startseite"       onclick="document.getElementById('iframe-mainpage').src='/informationContainer/startseite.html';" />

我找了一整天，但找不到有效的解决方案¯_(ツ)_/¯

Answer 1

你这里有一堆问题。

#1 首先，让我们解决您的 Uncaught TypeError 问题。错误来自 d 等于 document.getElementById(iframe_obj).onload 等于 加载函数。由于 Function 没有 body 或 documentElement 属性，因此您的 this_body 和 html 将永远是 undefined，因此，scrollHeight 和 offsetHeight 不存在于 undefined 上，抛出您看到的错误。

#2 解决该问题后，您会发现 Iframe 也没有正文或 documentElement 属性，您需要获取Iframe 中的 ContentWindow（请注意，您需要位于同一来源）。

#3 你在底部有一个 obj ...也许它在你代码的其他地方，但它根本不在你的例子中。它看起来更像是您希望它成为 iframe 本身，即 d.

因此，要彻底修复它，请试一试：

function setIframeHeight(iframeStringId) {
  var d = document.getElementById(iframeStringId);
  d.addEventListener('load', function() {
    var this_body = d.contentWindow.document.body;
    var html = d.contentWindow.document.documentElement;

    var height = Math.max(this_body.scrollHeight, this_body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    d.style.height = height + 'px';
  });
}

为什么本例中的 'scrollHeight' 被视为 'undefined'，为什么 iframe 在切换 html 文件时出现错误？

Why is 'scrollHeight' in this example seen as 'undefined' and why did the iframe get an error while switching the html-file?

html

javascript

iframe

height