33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图

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

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

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

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

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

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

        下面我们来看Xaml代码:

 

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

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

 

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

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

 

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

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


本文转自程兴亮 51CTO博客,原文链接:http://blog.51cto.com/chengxingliang/822561

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值