33.OOB模式下WebBrowser的簡單應用--模擬瀏覽器和百度地圖

時間 2020-11-01

標籤 javascript html java web sql api 瀏覽器 ide 函數 post 欄目瀏覽器简体版

原文原文鏈接

Silverlight的OOB模式(out-of-browser)下能夠提高用戶操做權限，訪問系統API、將Silverlight程序安裝在本地計算機上面而沒必要再瀏覽器中運行，在本節將講訴一個只能應用於OOB模式下的WebBrowser控件的簡單應用。javascript

首先建立一個新的Silverlight應用程序名爲SLBrowser而且設置其運行在OOB模式下，鼠標右鍵點擊SLBrowser項目，選擇「屬性」。在屬性頁的「Silverlight」欄下面咱們在「容許在瀏覽器外運行應用程序」打鉤。html

而後點擊「瀏覽器外設置」按鈕，設置窗口的樣式，另外在最下面有一個「在瀏覽器外運行時須要提高的信任」按鈕就是提高用戶操做權限的。java

咱們準備兩個按鈕「百度地圖」、「瀏覽」，分別模擬一下兩個功能：web

•點擊「百度地圖」按鈕的時候直接加載本地的Html文件訪問百度地圖sql

•點擊「瀏覽」按鈕的時候就將模擬一個瀏覽器，進入瀏覽器頁面api

下面咱們來看Xaml代碼：瀏覽器

   
   
   
   
    
    
    
    <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>

下面咱們來看CS代碼以下（注意：WebBrowser控件的InvokeScript能夠調用載入的html文件中的javascript函數）：ide

   
   
   
   
    
    
    
    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("請輸入一個有效的網址"); 
    
    
    
    } 
    
    
    
    } 
    
    
    
    }

準備一個BaiduMap.html以供WebBrowser控件調用連接到百度地圖（注意這個文件請放到SLBrowser.Web項目下的ClientBin文件夾下面），代碼以下：函數

   
   
   
   
    
    
    
    <!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>