【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 != 2) return;    
            
            var number = 0; 
            if (!int.TryParse(parts[1], out number)) return;
            
            switch (parts[0])
            {
                case "scrollHeight":
                    _scrollHeight = number;
                    if (_visibleHeight > 0)
                    {
                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;
                    }
                    break;
                case "clientHeight":
                    _visibleHeight = number;
                    if (_scrollHeight > 0)
                    {
                        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

 

你可能感兴趣的:(WebBrowser)