【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="" 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>
default.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
【WP8】WebBrowser相关的更多相关文章
- 记WinForm中WebBrowser相关的俩个问题
问题一:如何不让WebBrowser中弹出“安全警告” 当链接https网址时,IE会自动弹出上图中的窗口. 关闭窗口的具体思路如下: 使用WebBrowser加载中/加载完毕后触发的事件处理程序,在 ...
- 【WP8.1】WebView笔记
之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...
- [Cocos2d-x For WP8]Hello world
[Cocos2d-x For WP8]Hello world Cocos2d-x For WP8使用C++开发,使用cocos2d-xv0.13同样的接口,Cocos2d-x For WP8的相关项目 ...
- C# WinForm开发系列 - WebBrowser
原文:C# WinForm开发系列 - WebBrowser 介绍Vs 2005中带的WebBrowser控件使用以及一些疑难问题的解决方法, 如如何正确显示中文, 屏蔽右键菜单, 设置代理等; 收集 ...
- unity的坑
http://dearymz.blog.163.com/blog/static/20565742013341916919/ 编辑器: Hierarchy窗口中是场景中的Game Object列表 Pr ...
- GLView基本分析
GLView是cocos2d-x基于OpenGL ES的调用封装UI库. OpenGL本身是跨平台的计算机图形实现API,在每一个平台的详细实现是不一样.所以每次使用之前先要初始化,去设置平台相关的信 ...
- 【Win10】实现 ListViewBase 平滑滚动
首先解释下标题的 ListViewBase 是什么鬼.ListViewBase 我们可以查阅 MSDN 文档:https://msdn.microsoft.com/zh-cn/library/wind ...
- Effective C++ —— 设计与声明（四）
条款18 : 让接口容易被正确使用,不易被误用 欲开发一个“容易被正确使用,不容易被误用”的接口,首先必须考虑客户可能做出什么样的错误操作. 1. 明智而审慎地导入新类型对预防“接口被误用”有神奇疗 ...
- WebBrowse使用
C# WinForm开发系列 - WebBrowser 2009-12-14 14:19:21 标签:C# - WebBrowser 休闲 WinForm开发系列 介绍Vs 2005中带的WebBr ...
随机推荐
- SQL Server数据库镜像的页面自动修复原理
SQL Server数据库镜像的页面自动修复原理 主库页面损坏 镜像库页面损坏 LSN用来保证事务的时序 LSN保存在每个数据页面的页头 在同一台机器,内存中的数据页和磁盘中的数据页保持同步依靠的是数 ...
- DBImport v3.3 中文版发布：数据库数据互导及文档生成工具（IT人员必备）
前言: 好久没写文了, 距离上一篇文章是3个月前的事了,虽然工作很忙,主要还是缺少写作的内容和激情,所以没怎么动手. 之前有一个来月不断面试不同层次来应聘的人员,很有想写文的冲动,后来还是忍住了. 估 ...
- Python黑帽编程2.8 套接字编程
Python黑帽编程2.8 套接字编程 套接字编程在本系列教程中地位并不是很突出,但是我们观察网络应用,绝大多数都是基于Socket来做的,哪怕是绝大多数的木马程序也是如此.官方关于socket编程的 ...
- MySQL mysqldump数据导出详解
介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工具:它自带的功能参数非常多,文章中会列举出一些常用的操作,在文章末尾会将所有的参数详细说明 ...
- 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法
前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...
- IL指令汇总
名称 说明 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Ldelem.I1 将位于指定数组索引处的 int8 类型的元素作为 int32 加载到计算堆栈的顶部. Add.Ovf ...
- 推荐21款最佳 HTML5 网页游戏
尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...
- Android中activity背景色的设置
Android应用开发——系统自带样式Android:theme •android:theme="@android:style/Theme.Dialog" 将一个Activit ...
- 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程
Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...