【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
