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相关的更多相关文章

  1. 记WinForm中WebBrowser相关的俩个问题

    问题一:如何不让WebBrowser中弹出“安全警告” 当链接https网址时,IE会自动弹出上图中的窗口. 关闭窗口的具体思路如下: 使用WebBrowser加载中/加载完毕后触发的事件处理程序,在 ...

  2. 【WP8.1】WebView笔记

    之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...

  3. [Cocos2d-x For WP8]Hello world

    [Cocos2d-x For WP8]Hello world Cocos2d-x For WP8使用C++开发,使用cocos2d-xv0.13同样的接口,Cocos2d-x For WP8的相关项目 ...

  4. C# WinForm开发系列 - WebBrowser

    原文:C# WinForm开发系列 - WebBrowser 介绍Vs 2005中带的WebBrowser控件使用以及一些疑难问题的解决方法, 如如何正确显示中文, 屏蔽右键菜单, 设置代理等; 收集 ...

  5. unity的坑

    http://dearymz.blog.163.com/blog/static/20565742013341916919/ 编辑器: Hierarchy窗口中是场景中的Game Object列表 Pr ...

  6. GLView基本分析

    GLView是cocos2d-x基于OpenGL ES的调用封装UI库. OpenGL本身是跨平台的计算机图形实现API,在每一个平台的详细实现是不一样.所以每次使用之前先要初始化,去设置平台相关的信 ...

  7. 【Win10】实现 ListViewBase 平滑滚动

    首先解释下标题的 ListViewBase 是什么鬼.ListViewBase 我们可以查阅 MSDN 文档:https://msdn.microsoft.com/zh-cn/library/wind ...

  8. Effective C++ —— 设计与声明（四）

    条款18 : 让接口容易被正确使用,不易被误用 欲开发一个“容易被正确使用,不容易被误用”的接口,首先必须考虑客户可能做出什么样的错误操作.  1. 明智而审慎地导入新类型对预防“接口被误用”有神奇疗 ...

  9. WebBrowse使用

     C# WinForm开发系列 - WebBrowser 2009-12-14 14:19:21 标签:C# - WebBrowser 休闲 WinForm开发系列 介绍Vs 2005中带的WebBr ...

随机推荐

  1. SQL Server差异备份的备份/还原原理

    SQL Server差异备份的备份/还原原理 记住一点:差异备份是基于最后一次完整备份的差异,而不是基于最后一次差异的差异   备份过程: 1-完整备份之后有无对数据库做过修改,如果有,记录数据库的最 ...

  2. Web高级征程：《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

  3. 【读书笔记】Asp.Net MVC 上传图片到数据库（会的绕行）

    之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了.而且这种方式支持ie6(ie6不支持jquery自动提交fo ...

  4. 人人都是 DBA（XII）查询信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  5. MySQL MVCC(多版本并发控制)

    概述 为了提高并发MySQL加入了多版本并发控制,它把旧版本记录保存在了共享表空间(undolog),当事务提交之后将重做日志写入磁盘(前提innodb_flush_log_at_trx_commit ...

  6. ASP.NET MVC学前篇之扩展方法、链式编程

    ASP.NET MVC学前篇之扩展方法.链式编程 前言 目的没有别的,就是介绍几点在ASP.NETMVC 用到C#语言特性,还有一些其他琐碎的知识点,强行的划分一个范围的话,只能说都跟MVC有关,有的 ...

  7. ASP.NET Web API中的Controller

    虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是ASP.NET Web API框架本身只要 ...

  8. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  9. iOS-证书申请

    本文讲述发布证书的申请 首先登陆https://developer.apple.com(99美元账号) a.点击页面右上角 b.进入 c.选择证书类型 distribution,选择添加 d.点击+后 ...

  10. Redis命令笔记

    一.string类型:(1)set :设置key对应的值为string类型的value,例:set name helloworld(2)get :获取key对应的值为string类型的value,例: ...