【WP8】WebBrowser相关
2014年09月02日更新
今天用了一下WebBrowser，在使用过程中也遇到了一些问题，在这里做一下记录
虽然WebBrowser比较重，会比较影响性能（除非一定要用到它，否则尽量少用），但有时候还是得用WebBrowser来作为显示的控件，比如WP上有2048渲染的限制，我们可以通过WebBrowser来显示长文本，还有富文本信息（新闻）等，但使用起来也并不方便，这里做一下记录
1、禁止缩放
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--这里禁止缩放--> <meta content="width=device-width,user-scalable=no" name="viewport"> <style type="text/css"> img { width: 100%; } </style> </head>
2、JS调用C#代码（Notify）
我们可以在JS中发送一个消息到后台代码，告知需要做什么操作
比如在页面中有一个电话号码，当用户点击的时候，我们需要调用系统的API调用电话的Task，或者发邮件功能，又或者比较常见的，我们希望点击页面里面的图片的时候可以显示一张大图，并可以保存图片
1）由于JS只能向后台代码发送字符串消息，为了区分不同的消息，我们先统一一下消息格式
/// <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; } }
2）Xaml
<phone:WebBrowser x:Name="Browser" Grid.Row="1" IsScriptEnabled="True" ScriptNotify="Browser_OnScriptNotify" LoadCompleted="Browser_OnLoadCompleted" Source="http://www.baidu.com" />
3、.cs：JS通知事件函数
private void Browser_OnScriptNotify(object sender, NotifyEventArgs e) { //这个事件函数可以监听到JS通知的消息，消息类型为文本 //这里统一消息格式为：JsInvokeModel var model = JsonConvert.DeserializeObject<JsInvokeModel>(e.Value); switch (model.Type) { case "phoneCall": PhoneCall(model.Content1, model.Content2); break; case "sendEmail": SendEmail(model.Content1, model.Content2, model.Content3); break; case "image": MessageBox.Show(string.Format("图片：{0}", model.Content1)); break; case "text": MessageBox.Show(string.Format("文本：{0}", model.Content1)); break; } } public void SendEmail(string to, string body, string subject) { var task = new EmailComposeTask { Body = body, To = to, Subject = subject, }; task.Show(); } public void PhoneCall(string name, string phone) { var task = new PhoneCallTask { DisplayName = name, PhoneNumber = phone }; task.Show(); }
4）示例文件（HTML）
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--这里禁止缩放--> <meta content="width=device-width,user-scalable=no" name="viewport"> <style type="text/css"> img { width: 100%; } </style> </head> <body> <div id="content"> <a onclick="phoneCall('中国移不动', '10086')">打电话</a> <br/> <a onclick="invokeText('js调用C#方法')">Invoke C#</a> <br /> <a onclick="sendEmail('zhengbomo@hotmail.com', '测试邮件，从WebBrowser调用', '测试')">发邮件</a> <br /> <br /> <div>普通文本普通文本普通文本普通文本普通文本普通文本普通文本普通文本普通文本普通文本普通文本</div> <!--图片--> <img src="http://s1.dwstatic.com/group1/M00/F3/AD/9c26c21d6111fe1e2c2d9b301ad2fe66.jpg" alt="" /> <img src="http://s1.dwstatic.com/group1/M00/E0/E7/a43758af471383c14f2706e8b4cf2633.jpg" alt="" /> <img src="http://s1.dwstatic.com/group1/M00/B4/F7/f3cbe9a238c60807ea3cd82e3252e2a3.jpg" alt="" /> <!--引用安装目录的资源--> <img src="../emoji1.png" alt="" /> <!--引用本地文件--> <img src="x-wmapp0:Assets/AlignmentGrid.png" alt="" /> </div> <!--引用本地js--> <script src="../../Scripts/json2.min.js"></script> <!--<script src="x-wmapp0:Scripts/json2.min.js"></script>--> <script type="text/javascript"> window.onload = function () { //动态加载Script //var myScript = document.createElement("script"); //myScript.type = "text/javascript"; //myScript.src = "x-wmapp0:Scripts/json2.min.js"; //document.body.appendChild(myScript); 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 }; notify(JSON.stringify(jsonObj)); }; } }; //给C#后台代码调用的方法 function InvokeFromCode() { alert("C#调用js不参数的方法"); } //给C#后台代码调用的方法 function InvokeFromCodeWithParam(text) { document.getElementById("content").innerHTML = text; return "15"; } //发送文本消息 function invokeText(text) { var jsonObj = { type: 'text', content1: text }; notify(JSON.stringify(jsonObj)); } //发送邮件 function sendEmail(to, body, subject) { var jsonObj = { type: 'sendEmail', content1: to, content2: body, content3: subject }; notify(JSON.stringify(jsonObj)); } //调用打电话的方法 function phoneCall(name, phone) { //序列化方法 var jsonObj = { type: 'phoneCall', content1: name, content2:phone }; notify(JSON.stringify(jsonObj)); } //发送消息通知后台代码 function notify(msg) { window.external.Notify(msg); } </script> </body> </html>
5）调用
//拷贝安装目录文件到本地 await StorageHelper.Instance.CopyPackageFileToLocalAsync("Assets/Html/default.html", null, true); Browser.Navigate(new Uri("Assets/Html/default.html", UriKind.Relative));
3、C#调用JS方法
1、使用eval方法执行自定义代码
2、使用x-wmapp0:引用本地路径
3、使用 json2 进行json序列化
注意：后台代码调用JS的时候一般在 LoadCompleted 事件中调用
下面代码调用的方法见示例文件：default.html
//1、获得HTML代码（两种方式） var html = Browser.SaveToString(); var html = Browser.InvokeScript("eval", new[] {"document.documentElement.outerHTML;"}); //2、调用js方法（不带参数） Browser.InvokeScript("InvokeFromCode"); //3、调用js方法（带参数，返回值） var res = Browser.InvokeScript("InvokeFromCodeWithParam", new[] { "从后台代码调用js修改html" }); //4、动态加载js库（x-wmapp0:表示本地路径） var js = @" var myScript = document.createElement(""script""); myScript.type = ""text/javascript""; myScript.src = ""x-wmapp0:Scripts/json2.min.js""; document.body.appendChild(myScript);"; Browser.InvokeScript("eval", js); //5、调用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)); }; }"; Browser.InvokeScript("eval", js);
4、Browser导航
//刷新 Browser.InvokeScript("eval", "history.go()"); //后退（下面两种方式） Browser.InvokeScript("eval", "history.go(-1)"); Browser.GoBack(); //前进（下面两种方式） Browser.InvokeScript("eval", "history.go(1)"); Browser.GoForward();
5、缓存
WebBrowser只提供了清除缓存和Cookie的方法，没有找到设置缓存的相关方法
Browser.ClearCookiesAsync();
Browser.ClearInternetCacheAsync();
6、常见问题
2014年10月8日更新：
使用WebBrowser.NavigateToString(string html)要注意，在WP8.0上，这里的html字符串中不要包括HTML文件的头部文档类型声明，否则会出现无法解析的问题
<!DOCTYPE html>
我们把 <!DOCTYPE html> 删除之后，则可以正常渲染，这个问题在WP8.0的时候才会，在WP8.1之后不会
最后：
动态资源的加载可以用于我们不能控制html内容的页面，比如我们访问百度页面，里面有很多图片，我们需要点击图片的时候，可以弹出框显示一张大图，同时可以让用户保存，这个时候我们可以动态加载JS，去监听所有的点击事件，这样，所有的页面的图片我们都能监听到点击事件了，而且能获取到图片链接
个人能力有限，如果上文有误或者您有更好的实现，可以给我留言
转载请注明出处：http://www.cnblogs.com/bomo/p/3949994.html
