之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记
下面分为几个部分
1、禁止缩放
2、JS通知后台C#代码(notify)
3、C#调用JS方法
动态加载JS文件,动态注册事件方法(eval)
4、WebView导航
5、手势(WinJS)
6、常见问题
1、禁用缩放
body { /* Block area from manipulation actions (zoom, pan) */ touch-action: pan-y; }
这个值可以禁用掉缩放和横向手势
关于touch-action参见:https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh767313.aspx?f=255&MSPPError=-2147217396
2、JS通知后台C#代码(notify)
window.external.notify(msg);
注意:这里的方法名是小写的,在WP8上后面的Notify方法的首字母是大小写都可以
3、C#调用JS方法(InvokeScriptAsync)
通过后台代码动态加载css,js,动态绑定事件和方法
3.1、先定义传输的数据格式
/// <summary> /// JS消息格式 /// </summary> public class JsInvokeModel { [JsonProperty("type")] public string Type { get; set; } [JsonProperty("content1")] public string Content1 { get; set; } [JsonProperty("content2")] public string Content2 { get; set; } [JsonProperty("content3")] public string Content3 { get; set; } }
3.2、XAML
<WebView x:Name="WebView" DOMContentLoaded="WebView_OnDOMContentLoaded" ScriptNotify="WebView_OnScriptNotify" />
3.3、下面是事件方法
//DOM树加载完成后执行 private async void WebView_OnDOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args) { //1、动态加载css var js = @"var myCss = document.createElement(""link""); myCss.rel = ""stylesheet""; myCss.type = ""text/css""; myCss.href = ""ms-appx-web:///Assets/Html/css/default.css""; document.body.appendChild(myCss);"; await sender.InvokeScriptAsync("eval", new[] { js }); //2、动态加载js库(json2) js = @"var myScript = document.createElement(""script""); myScript.type = ""text/javascript""; myScript.src = ""ms-appx-web:///Scripts/json2.min.js""; document.body.appendChild(myScript);"; await sender.InvokeScriptAsync("eval", new[] {js}); //3、调用js执行自定义代码(为图片添加点击事件,并通知) js = @"var imgs = document.getElementsByTagName(""img""); for (var i = 0, len = imgs.length; i < len; i++) { imgs[i].onclick = function (e) { var jsonObj = { type: 'image', content1: this.src }; window.external.notify(JSON.stringify(jsonObj)); }; }"; await sender.InvokeScriptAsync("eval", new[] {js}); //4、动态加载手势 js = @"var myScript = document.createElement(""script""); myScript.type = ""text/javascript""; myScript.src = ""ms-appx-web:///Assets/Html/js/gesture.js""; document.body.appendChild(myScript); window.external.notify(myScript.src+"""");"; await sender.InvokeScriptAsync("eval", new[] { js }); //5、为body添加手势监听 js = @"var target = document.getElementsByTagName(""body"")[0]; prepareTarget(target, eventListener);"; await sender.InvokeScriptAsync("eval", new[] { js }); }
3.4、Notify监听
private void WebView_OnScriptNotify(object sender, NotifyEventArgs e) { //这个事件函数可以监听到JS通知的消息,消息类型为文本 //这里统一消息格式为:JsInvokeModel var model = JsonConvert.DeserializeObject<JsInvokeModel>(e.Value); switch (model.Type) { case "image": Info.Text = e.Value; break; case "swiperight": //右滑 Info.Text = e.Value; break; case "swipeleft": //左滑 Info.Text = e.Value; break; case "text": Info.Text = e.Value; break; } }
WebView虽然提供了同步方法InvokeScript,但是在WP8.1没有实现
通过InvokeScriptAsync,可以做更多操作,例如,相信对于更换颜色(夜间模式),修改字体大小等
4、WebView导航
两种方式
//后退 //WebView.GoBack(); await WebView.InvokeScriptAsync("eval", new []{"history.go(-1)"}); //刷新 //WebView.Refresh(); await WebView.InvokeScriptAsync("eval", new[] { "history.go()" }); //前进 //WebView.GoForward(); await WebView.InvokeScriptAsync("eval", new[] { "history.go(1)" });
5、手势
由于WebView的内部结构与WebBrowser不同,WebView无法监听到Manipulation事件
场景:当我们需要在PivotItem中放置WebView的时候,左右滑动无法切换PivotItem,下面通过JS手势监听WebView上面的手势操作,然后传到后台代码进行处理,这里没有做实时处理,只是监听了手势离开时的速度判断左右滑动
5.1、定义手势监听事件方法
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var gesture; //记录手势操作开始位置 var gestureStartX; //触发Id,防止重复触发,触发Id与手势Id var gestureId = 1; var lastGestureId = 0; //速度触发 var gestureVector = 1.5; //注册手势事件 function prepareTarget(target, eventListener) { //var target = document.getElementById(targetId); target.addEventListener("MSGestureStart", eventListener, false); target.addEventListener("MSGestureEnd", eventListener, false); target.addEventListener("MSGestureChange", eventListener, false); target.addEventListener("MSInertiaStart", eventListener, false); //target.addEventListener("MSGestureTap", eventListener, false); //target.addEventListener("MSGestureHold", eventListener, false); target.addEventListener("pointerdown", onPointDown, false); target.addEventListener("pointerup", onPointUp, false); gesture = new MSGesture(); gesture.target = target; } function onPointUp(e) { //把触发时间参数传到gesture gesture.addPointer(e.pointerId); } function onPointDown(e) { //把触发时间参数传到gesture gesture.addPointer(e.pointerId); } //手势事件 //具体的属性参见:https://msdn.microsoft.com/zh-cn/library/ie/hh772076%28v=vs.85%29.aspx function eventListener(evt) { var myGesture = evt.gestureObject; if (evt.type == "MSGestureStart") { //开始触发,记录初始位置 gestureStartX = evt.clientX; } else if (evt.type == "MSInertiaStart") { if (lastGestureId == gestureId || evt.velocityX == "undefined") { return; } else { //释放时触发惯性事件,判断手势释放时的速度 if (evt.velocityX > gestureVector) { var jsonObj = { type: "swiperight" }; window.external.notify(JSON.stringify(jsonObj)); lastGestureId = gestureId; } else if (evt.velocityX < -gestureVector) { jsonObj = { type: "swipeleft" }; window.external.notify(JSON.stringify(jsonObj)); lastGestureId = gestureId; } } } else if (evt.type == "MSGestureChange") { //if (lastGestureId == gestureId) { // return; //} else { // var change = evt.clientX - gestureStartX; // window.external.notify("clientX:" + change); //} } else if (evt.type == "MSGestureEnd") { //手势结束,Id+1 gestureId = gestureId + 1; myGesture.reset(); } }
5.2、在WebView加载完成后,动态加载改JS文件,获取body标签,然后监听事件(参见3.3)
5.3、当事件触发的时候改变Pivot.SelectedIndex,这样就能实现在WebView上滑动切换PivotItem
private void WebView_OnScriptNotify(object sender, NotifyEventArgs e) { //这个事件函数可以监听到JS通知的消息,消息类型为文本 //这里统一消息格式为:JsInvokeModel var model = JsonConvert.DeserializeObject<JsInvokeModel>(e.Value); switch (model.Type) { case "image": Info.Text = e.Value; break; case "swiperight": Info.Text = e.Value; if (pivot.Items != null) { if (pivot.SelectedIndex > 0) { pivot.SelectedIndex--; } else { pivot.SelectedIndex = pivot.Items.Count - 1; } } break; case "swipeleft": Info.Text = e.Value; if (pivot.Items != null) { if (pivot.SelectedIndex < pivot.Items.Count - 1) { pivot.SelectedIndex++; } else { pivot.SelectedIndex = 0; } } break; case "text": Info.Text = e.Value; break; } }
6、常见问题
6.1、alert和prompt方法在WebView失效,如果需要,可以使用 window.external.notify('message');然后再后台代码进行处理
6.2、如果是导航到本地路径(ms-appdata:///local/),需要注意
6.2.1、必须要将html需要的资源和html文件放在同一个文件夹下,html的资源路径不管是不是”/”开头,webview都认为是相对路径
6.2.2、如果html中要的本地文件,如果在对应目录中不存在,wp上会直接跳出应用,大概过1分钟左右崩溃,且捕获不到异常。Windows上没有这现象
6.2.3、不支持js的window.exteranl.notify功能
webView1.Navigate(new Uri("ms-appdata:///local/data/html/sample.htm"));
不知道为什么WebView在导航到本地路径的时候 window.external.notify 会失效,如果需要可以考虑使用 内容流的方式加载本地文件
下面做简单的演示
1、定义内容留转换器
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
public class HtmlStreamUriResolver : IUriToStreamResolver { public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri) { string path = uri.AbsolutePath; return GetContent(path).AsAsyncOperation(); } // 根据 uri 返回对应的内容流 private async Task<IInputStream> GetContent(string path) { if (path.StartsWith("http")) { // http 方式获取内容数据 var client = new HttpClient(); var response = await client.GetAsync(new Uri(path), HttpCompletionOption.ResponseHeadersRead); return (await response.Content.ReadAsStreamAsync()).AsInputStream(); } else if (path.StartsWith("/local/cachedata/html/")) { path = string.Format("ms-appdata://{0}", path); // 获取本地数据 var fileRead = await StorageFile.GetFileFromApplicationUriAsync(new Uri(path)); return await fileRead.OpenAsync(FileAccessMode.Read); } else { // 获取本地数据 var fileRead = await StorageFile.GetFileFromApplicationUriAsync(new Uri(path, UriKind.Absolute)); return await fileRead.OpenAsync(FileAccessMode.Read); } } }
2、生成,导航,html中的所有引用都通过HtmlStreamUriResolver返回,具体逻辑在里面处理,通过这样导航的页面可以使用 window.external.notify 方法
//生成内容流 var htmlStreamUriResolver = new HtmlStreamUriResolver(); var uri = webView.BuildLocalStreamUri("tag", "/local/cachedata/html/sample.html"); webView.NavigateToLocalStreamUri(uri, htmlStreamUriResolver);
7、Demo
http://files.cnblogs.com/files/bomo/WebViewDemo.zip
8、参考链接
手势事件参数说明:https://msdn.microsoft.com/zh-cn/library/ie/hh772076%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
WinJS手势:https://msdn.microsoft.com/zh-cn/library/ie/hh968249(v=vs.85).aspx
Win8.1和WP8.1在UniversalAPP中WebView的研究:http://blog.csdn.net/hzdinglai/article/details/41073739
重新想象 Windows 8.1 Store Apps (81) : WebView:http://www.cnblogs.com/webabcd/p/3803384.html
关于WP8的WebBrowser,请移步:http://www.cnblogs.com/bomo/p/3949994.html
个人能力有限,如果上文有误或者您有更好的实现,可以给我留言