具有 Doctype 的 WebBrowser 中的不同 JavaScript 行为

Question

我有一个 Windows Phone 8 项目，我在 WebBrowser 组件中显示了一些数据。

WindowsPhone8中的WebBworser没有滚动条，我自己实现了一个。为此，我需要知道文档的总高度（我使用document.body.scrollHeight获取）和当前显示的高度windows（我使用document.body.clientHeight获取） .完整的 HTML 模板是

<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
      <meta name="MobileOptimized" content="width"/>
        <meta name="HandheldFriendly" content="true"/>
        <script type="text/javascript">
            function initialize() {{
                window.external.notify("scrollHeight=" + document.body.scrollHeight.toString());
                window.external.notify("clientHeight=" + document.body.clientHeight.toString());
                window.onscroll = onScroll;
            }}

            function onScroll(e) {{
                var scrollPosition = document.body.scrollTop;
                window.external.notify("scrollTop=" + scrollPosition.toString());
            }}

            window.onload = initialize;
        </script>
        <style type="text/css">
            {0}
        </style>
    </head>
    <body>
        {1}
    </body>
</html>

到目前为止一切顺利，我的解决方案运行良好。问题是，我想使用 CSS3 所以我必须在 <html> 标签之前添加 <!DOCTYPE> 才能使其工作。

但是添加<!DOCTYPE>完全改变了JavaScript的行为，document.body.scrollHeight现在没有return整个文档的高度，只是略高于document.body.scrollHeight。有什么解决办法吗？

Answer 1

要解决 Trident 中的此类奇怪问题，您需要获取文档的高度，而不是主体。

document.documentElement.scrollHeight
是文档的完整高度

document.documentElement.clientHeight
用于文档当前可见部分的高度

PS。请务必不要存储 scrollHeight 和 clientHeight，因为它们可能会因文档插入或延迟内容加载而发生变化 and/or 设备旋转

具有 Doctype 的 WebBrowser 中的不同 JavaScript 行为

Different JavaScript behavior in WebBrowser with Doctype

javascript

c#

xaml

windows-phone-8