Question

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

Windows Phone 8中的WebBworser没有显示滚动条，因此我自己实现了一个滚动条。要做到这一点，我不需要知道文档的总高度（我使用document.body.scrollHeight来获取它）和当前显示的窗口的高度（我使用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，因此我必须在<!DOCTYPE>标记之前添加<html>才能使其正常工作。

但添加<!DOCTYPE>完全改变了JavaScript行为，document.body.scrollHeight现在不会返回整个文档的高度，只是略高于document.body.scrollHeight的数字。任何想法如何解决这个问题？

Answer 1

要解决Trident中的这些奇怪问题，您需要获得文档的高度，而不是正文。

document.documentElement.scrollHeight
是为了文件的完整高度

document.documentElement.clientHeight
是针对文档当前可见部分的高度

PS。请确保不存储scrollHeight和clientHeight，因为它们可能因文档插入或延迟的内容加载和/或设备轮换而发生变化

使用Doctype的WebBrowser中的不同JavaScript行为

1 个答案: