【WP8】为Webbrowser添加ScrollBar

在WP8中，控件WebBrowser没有提供对滚动条的支持，而在内置的IE中，却可以显示出滚动条（微软这是在坑我们吗），但如果在客户端使用Webbrowser的话，自己构造ScrollBar来显示

　　通过javascript监听onscroll事件，然后传递给Webbrowser，通过onscroll的位置来确定自定义的ScrollBar的位置

下面演示方法：

1、在Html代码中添加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;

2、在xaml中定义控件

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <phone:WebBrowser x:Name="ContentWebBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"IsScriptEnabled="True" ScriptNotify="ContentWebBrowser_ScriptNotify"/>

            <ScrollBar x:Name="DisplayScrollBar" Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Stretch" Minimum="0" Maximum="100" Value="0"/>

        </Grid>

3、在Webbrowser添加 ScriptNotify 事件方法（注意：需要将Webbrowser的IsScriptEnabled属性设为True）

        private void ContentWebBrowser_ScriptNotify(object sender, NotifyEventArgs e)

        {

            var parts = e.Value.Split('=');

            if (parts.Length != ) return;    

            var number = ;

            if (!int.TryParse(parts[], out number)) return;

            switch (parts[])

            {

                case "scrollHeight":

                    _scrollHeight = number;

                    if (_visibleHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "clientHeight":

                    _visibleHeight = number;

                    if (_scrollHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "scrollTop":

                    DisplayScrollBar.Value = number;

                    break;

            }

        }

3、测试

　　1）、定义一个WebBrowserHelper生成Html代码

    public class WebBrowserHelper

    {

        public static string NotifyScript

        {

            get

            {

                return @"<script>

                    window.onload = function(){

                        initialize();

                    }

                    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());

                    }

                    </script>";

            }

        }

        public static string WrapHtml(string bodyContent, double viewportWidth)

        {

            var html = new StringBuilder();

            html.Append("<html>");

            html.Append(HtmlHeader(viewportWidth));

            html.Append("<body>");

            html.Append(bodyContent);

            html.Append("</body>");

            html.Append(NotifyScript);

            html.Append("</html>");

            return html.ToString();

        }

        public static string HtmlHeader(double viewportWidth)

        {

            var head = new StringBuilder();

            head.Append("<head>");

            head.Append(string.Format("<meta name=\"viewport\" value=\"width={0}\" user-scalable=\"no\" />",

                                      viewportWidth));

            head.Append("</head>");

            return head.ToString();

        }

    }

　　2）传入HTML运行

var html = WebBrowserHelper.WrapHtml(

                    @"<div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>", ContentWebBrowser.Width);

            ContentWebBrowser.NavigateToString(html);

测试成功。

参考：http://www.mistergoodcat.com/post/Somethings-Missing-from-the-WebBrowser-Control

巴特西

【WP8】为Webbrowser添加ScrollBar

最新文章

热门文章