Die scrollHeight-Eigenschaft gibt möglicherweise falsche Werte in Internet Explorer zurück.

  • Artikel
  • 3 Minuten Lesedauer

Wichtig

Die Internet Explorer 11-Desktopanwendung wird für bestimmte Versionen von Windows 10 eingestellt und ab dem 15. Juni 2022 nicht mehr unterstützt.

Sie können mit dem Internet Explorer-Modus in Microsoft Edge weiterhin auf ältere Websites zugreifen, für die Internet Explorer erforderlich ist. Anleitung.

Die Internet Explorer 11-Desktopanwendung wird schrittweise an den schnelleren, sichereren Microsoft Edge-Browser umgeleitet und letztendlich über Windows Update deaktiviert werden. Deaktivieren von IE heute.

Dieser Artikel enthält ein Beispiel zum Aufrufen der Scroll height-Eigenschaft, um die Höhe der Webseite festzulegen.

Ursprüngliche Produktversion:   Internet Explorer 9 und höhere Versionen
Ursprüngliche KB-Nummer:   2684777

Problembeschreibung

Die scrollHeight Eigenschaft eines iFrames gibt möglicherweise einen Wert zurück, der kleiner als erwartet ist. Die Verwendung dieses Werts zum Ändern der Höhe des iFrames kann dazu führen, dass die vertikale Bildlaufleiste angezeigt wird, wodurch der Inhalt höher wird.

Ursache

Microsoft hat bestätigt, dass ein Problem mit der scrollHeight Eigenschaftsberechnung vorliegt.

Problemumgehung

Fügen Sie der Höhe zusätzliche Abstände hinzu. Dadurch werden die meisten Situationen behoben, wenn die angezeigte Bildlaufleiste nicht erwünscht ist. Wechseln Sie alternativ zum Standarddokumentmodus von Internet Explorer 9, da das Problem in diesem Modus nicht auftritt.

Weitere Informationen

Es ist nicht genau bekannt, dass alle Für dieses Problem erforderlichen Bedingungen angezeigt werden. In einigen Situationen tritt das Problem nur auf anderen Zoomstufen neben 100 % auf.

Nachfolgend sehen Sie ein Beispiel, in dem scrollHeight nicht groß genug ist, um als pixelHeight zu verwenden, obwohl der Abstand, der Rand und der Rahmen alle 0 Pixel im iFrame und im Element html body sind. Wenn der iFrame größer als der Inhalt ist, wird eine scrollHeight von 491 angezeigt, obwohl 491 nicht ausreicht, um zu verhindern, dass die Bildlaufleisten angezeigt werden. Dieses Beispiel wird nur im Internet Explorer 8-Standardmodus reproduziert. Andere Beispiele können für den Standardmodus für Internet Explorer 9 und neuere Versionen und/oder den Quirksmodus reproduziert werden.

  • test.htm
<!doctype>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <button onclick="Test()">Set iframe's pixelHeight to scrollHeight</button><br/>
        <div id="myDiv" style="position: absolute; left: 200px; border: 2px solid black; height: 50px; width: 300px"></div>
        <iframe style="width: 182px; height: 491px; border: 1px solid green;" id=myiframe src="iframe.htm" frameBorder=0></iframe>
        <script language="javascript">
            function Test()
            {
            var obj = document.getElementById("myiframe");
            obj.style.pixelHeight = obj.contentWindow.document.body.scrollHeight;
            var result = obj.contentWindow.document.body.scrollHeight;
            document.getElementById("myDiv").innerHTML = "iframe scrollHeight = " + result + "<br/>";
            }
        </script>
    </body>
</html>
  • iframe.htm
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            body {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 70%;
            padding: 0px; margin: 0px; border: 0px;
            }
            html { padding: 0px; margin: 0px; border: 0px; }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <p>1st row in p tags</p>
                        </td>
                    </tr>
                    <tr>
                        <td>2nd row</td>
                    </tr>
                    <tr>
                        <td>
                            3rd row of text
                            <div>
                                <hr>
                                Text below the hr that wraps to next line<br>
                                This line of text is lone enough to go to four lines and at seventy five percent zoom will cause the problem<br>
                                <hr>
                                abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Wenn die Höhe des iframes basierend auf dieser Eigenschaft im OnResize-Ereignishandler festgelegt wird, müssen Sie darauf achten, einen unendlichen Datenstrom von Onresize-Aufrufen zu vermeiden, da Sie möglicherweise die Höhe des iFrames zwischen einer Höhe ohne Bildlaufleisten und einer Höhe mit Bildlaufleisten umschalten. Das Hinzufügen des Abstands oder die Verwendung von Flags sollte die unendliche Rekursion verhindern.