【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

相关阅读:
Mysql创建自定义函数
 本草纲目之五味四气
 linux svn命令
 linux命令提升
 php isset缺陷用array_key_exists
jquery之ajax
简单的小游戏（猜数字）
小球上下左右移动
 如果想在输出面板中排列出一个乘法口诀表请用以下方法
 并联电路
原文地址：https://www.cnblogs.com/bomo/p/3387456.html