Silverlight实用窍门系列：33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图【附带源码实例】

比眉伴天荒 2022-09-17 13:11 97阅读 0赞

Silverlight的OOB模式(out-of-browser)下可以提升用户操作权限，访问系统API、将Silverlight程序安装在本地计算机上面而不必再浏览器中运行，在本节将讲诉一个只能应用于OOB模式下的WebBrowser控件的简单应用。

首先创建一个新的Silverlight应用程序名为SLBrowser并且设置其运行在OOB模式下，鼠标右键点击SLBrowser项目，选择“属性”。在属性页的“Silverlight”栏下面我们在“允许在浏览器外运行应用程序”打钩。

![2011040215562127.jpg][]

然后点击“浏览器外设置”按钮，设置窗口的样式，另外在最下面有一个“在浏览器外运行时需要提升的信任”按钮就是提升用户操作权限的。

![2011040215564140.jpg][]

我们准备两个按钮“百度地图”、“浏览”，分别模拟一下两个功能：

•点击“百度地图”按钮的时候直接加载本地的Html文件访问百度地图

•点击“浏览”按钮的时候就将模拟一个浏览器，进入浏览器页面

下面我们来看Xaml代码：

![复制代码][copycode.gif]

<
        
         Grid x:Name
        
         =
        
         "
        
         LayoutRoot
        
         "
        
         Background
        
         =
        
         "
        
         White
        
         "
        
         >
        
         
        
         <
        
         TextBlock Height
        
         =
        
         "
        
         23
        
         "
        
         HorizontalAlignment
        
         =
        
         "
        
         Left
        
         "
        
         Margin
        
         =
        
         "
        
         29,12,0,0
        
         "
        
         Name
        
         =
        
         "
        
         textBlock1
        
         "
        
         Text
        
         =
        
         "
        
         查询地址：
        
         "
        
         VerticalAlignment
        
         =
        
         "
        
         Top
        
         "
        
         
        
         />
        
         
        
         <
        
         TextBox Height
        
         =
        
         "
        
         23
        
         "
        
         HorizontalAlignment
        
         =
        
         "
        
         Right
        
         "
        
         Margin
        
         =
        
         "
        
         0,8,207,0
        
         "
        
         Name
        
         =
        
         "
        
         textBox1
        
         "
        
         VerticalAlignment
        
         =
        
         "
        
         Top
        
         "
        
         Width
        
         =
        
         "
        
         703
        
         "
        
         
        
         />
        
         
        
         <
        
         Button Content
        
         =
        
         "
        
         百度地图
        
         "
        
         Height
        
         =
        
         "
        
         23
        
         "
        
         HorizontalAlignment
        
         =
        
         "
        
         Left
        
         "
        
         Margin
        
         =
        
         "
        
         804,8,0,0
        
         "
        
         Name
        
         =
        
         "
        
         button1
        
         "
        
         VerticalAlignment
        
         =
        
         "
        
         Top
        
         "
        
         Width
        
         =
        
         "
        
         78
        
         "
        
         Click
        
         =
        
         "
        
         button1_Click
        
         "
        
         
        
         />
        
         
        
         <
        
         WebBrowser Height
        
         =
        
         "
        
         638
        
         "
        
         HorizontalAlignment
        
         =
        
         "
        
         Left
        
         "
        
         Margin
        
         =
        
         "
        
         21,41,0,0
        
         "
        
         Name
        
         =
        
         "
        
         webBrowser1
        
         "
        
         VerticalAlignment
        
         =
        
         "
        
         Top
        
         "
        
         Width
        
         =
        
         "
        
         953
        
         "
        
         
        
         />
        
         
        
         <
        
         Button Content
        
         =
        
         "
        
         浏 览
        
         "
        
         Height
        
         =
        
         "
        
         23
        
         "
        
         HorizontalAlignment
        
         =
        
         "
        
         Right
        
         "
        
         Margin
        
         =
        
         "
        
         0,8,32,0
        
         "
        
         Name
        
         =
        
         "
        
         button2
        
         "
        
         VerticalAlignment
        
         =
        
         "
        
         Top
        
         "
        
         Width
        
         =
        
         "
        
         77
        
         "
        
         Click
        
         =
        
         "
        
         button2_Click_1
        
         "
        
         
        
         />
        
         
        
         </
        
         Grid
        
         >

![复制代码][copycode.gif]

下面我们来看CS代码如下（注意：WebBrowser控件的InvokeScript可以调用载入的html文件中的javascript函数）：

![复制代码][copycode.gif]

public
        
         
        
         partial
        
         
        
         class
        
         MainPage : UserControl { 
        
         public
        
         MainPage() { InitializeComponent(); 
        
         //
        
         webBrowser1加载本地的baiduMap.html页面
        
         
        
         
        
         this
        
         .webBrowser1.Navigate(
        
         new
        
         Uri(Application.Current.Host.Source, 
        
         "
        
         baiduMap.html
        
         "
        
         )) } 
        
         private
        
         
        
         void
        
         button1_Click(
        
         object
        
         sender, RoutedEventArgs e) { 
        
         //
        
         调用加载的百度地图baiduMap.html内的BaiduSearch函数，并且传入值
        
         
        
         
        
         this
        
         .webBrowser1.InvokeScript(
        
         "
        
         BaiduSearch
        
         "
        
         , 
        
         this
        
         .textBox1.Text); } 
        
         private
        
         
        
         void
        
         button2_Click_1(
        
         object
        
         sender, RoutedEventArgs e) { 
        
         try
        
         { 
        
         //
        
         获取Uri地址，并且让webBrowser1载入该地址
        
         
        
         
        
         string
        
         url
        
         =
        
         this
        
         .textBox1.Text.Trim().Replace(
        
         "
        
         http://
        
         "
        
         ,
        
         ""
        
         ); 
        
         this
        
         .webBrowser1.Navigate(
        
         new
        
         Uri(
        
         "
        
         http://
        
         "
        
         
        
         +
        
         url , UriKind.RelativeOrAbsolute)); 
        
         //
        
         当访问了网页之后设置隐藏百度地图搜索按钮
        
         
        
         
        
         this
        
         .button1.Visibility 
        
         =
        
         Visibility.Collapsed; textBox1.Margin 
        
         =
        
         
        
         new
        
         Thickness(
        
         0
        
         , 
        
         8
        
         , 
        
         118
        
         , 
        
         0
        
         ); textBox1.Width 
        
         =
        
         
        
         792
        
         ; } 
        
         catch
        
         (Exception ex) { MessageBox.Show(
        
         "
        
         请输入一个有效的网址
        
         "
        
         ); } } }

![复制代码][copycode.gif]

准备一个BaiduMap.html以供WebBrowser控件调用链接到百度地图（注意这个文件请放到SLBrowser.Web项目下的ClientBin文件夹下面），代码如下：

![复制代码][copycode.gif]

<!
        
         DOCTYPE html PUBLIC 
        
         "
        
         -//W3C//DTD XHTML 1.0 Transitional//EN
        
         "
        
         
        
         "
        
         http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
        
         "
        
         >
        
         
        
         <
        
         html xmlns
        
         =
        
         "
        
         http://www.w3.org/1999/xhtml
        
         "
        
         >
        
         
        
         <
        
         head
        
         >
        
         
        
         <
        
         meta http
        
         -
        
         equiv
        
         =
        
         "
        
         Content-Type
        
         "
        
         content
        
         =
        
         "
        
         text/html; charset=gb2312
        
         "
        
         
        
         />
        
         
        
         <
        
         title
        
         >
        
         百度地图实例
        
         </
        
         title
        
         >
        
         
        
         <
        
         script type
        
         =
        
         "
        
         text/javascript
        
         "
        
         src
        
         =
        
         "
        
         http://api.map.baidu.com/api?key=d3501091615b31a7a3af15a29e6d7363&v=1.0&services=true
        
         "
        
         ></
        
         script
        
         >
        
         
        
         </
        
         head
        
         >
        
         
        
         <
        
         body style
        
         =
        
         "
        
         font-size: 12px;
        
         "
        
         >
        
         
        
         <
        
         form id
        
         =
        
         "
        
         form1
        
         "
        
         name
        
         =
        
         "
        
         form1
        
         "
        
         method
        
         =
        
         "
        
         post
        
         "
        
         action
        
         =
        
         ""
        
         >
        
         
        
         <
        
         div style
        
         =
        
         "
        
         width: 100%; height: 600px; border: 1px solid gray;
        
         "
        
         id
        
         =
        
         "
        
         container
        
         "
        
         >
        
         
        
         </
        
         div
        
         >
        
         
        
         <
        
         script type
        
         =
        
         "
        
         text/javascript
        
         "
        
         >
        
         var map 
        
         =
        
         
        
         new
        
         BMap.Map(
        
         "
        
         container
        
         "
        
         ); var point 
        
         =
        
         
        
         new
        
         BMap.Point(
        
         116.404
        
         , 
        
         39.915
        
         ); 
        
         //
        
         地图坐标
        
         
        
         var keyWord 
        
         =
        
         
        
         "
        
         北京
        
         "
        
         ; map.centerAndZoom(point, 
        
         13
        
         ); 
        
         //
        
         深度
        
         
        
         map.enableScrollWheelZoom(); 
        
         //
        
         通过鼠标中间可放大缩小 
        
         //
        
         增加放大缩小控件
        
         
        
         map.addControl(
        
         new
        
         BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL })); 
        
         //
        
         声明一个搜索对象
        
         
        
         var local 
        
         =
        
         
        
         new
        
         BMap.LocalSearch(map, { renderOptions: { map: map } }); 
        
         //
        
         封装一个搜索函数供Silverlight调用
        
         
        
         function BaiduSearch(keyWord) { local.search(keyWord); } 
        
         </
        
         script
        
         >
        
         
        
         </
        
         form
        
         >
        
         
        
         </
        
         body
        
         >
        
         
        
         </
        
         html
        
         >

![复制代码][copycode.gif]

本源码使用VS2010+Silverlight 4.0编写，如需源码请点击[SLBrowser.zip][] 下载。下面是加载百度地图和浏览器的效果图。

![2011040216093861.jpg][]

![2011040216095029.jpg][]

分类:  [Silverlight实用窍门序列][Silverlight]

[2011040215562127.jpg]: /images/20220828/e4d98dd4c4774afcb64907ac5c600ece.png
[2011040215564140.jpg]: /images/20220828/6e14a99729f64f58999fd2194acf7c3b.png
[copycode.gif]: /images/20220828/d1df69169b14415aa76a220d13dda873.png
[SLBrowser.zip]: http://files.cnblogs.com/chengxingliang/SLBrowser.zip
[2011040216093861.jpg]: /images/20220828/3b627af92e564b98aae7324d59c77500.png
[2011040216095029.jpg]: /images/20220828/acbd7189fb114db392338e4e569c7d6c.png
[Silverlight]: http://www.cnblogs.com/chengxingliang/category/282240.html