了解 Windows Phone 7 网页浏览器控件 – Part 1

The Web Browser (Ph) Application 前些日子，有关注我 Blog 的朋友应该都已经注意到，我发表了 Web Browser (Ph) Application 上架 Marketplace 的相关信息，也分享了退件及通过审核的一些过程。现在让我将开发这个应用程序的经验与大家分享。

除了个人懒惰没看清认证的一些规则导致退件的经验之外，Web Browser(Ph) 于开发中有两个问题是最重要的，第一个当然是中文输入法，此问题的解法其实很简单，就是必须要拥有相关的字及注音码，接着就只要做接口就好了，如果对此有兴趣及需要 ，我建议读者们参考 David 老师与光岩信息提供的控件(因为我的字库其实并不完整)。

第二个问题就是，Web Browser (Ph) 是如何知道，使用者点选到了某个输入框？又是如何将输入的中文字放到输入框里？ Web Browser 控件其实用法分为简易与深入两种，简易的将其拿来做为显示某个网页用，深度的用法则是在显示网页后，尝试将整个网页的控制权拿在手里，Web Browser (Ph) 即是深度的用法。

OK，那么 Web Browser(Ph) 如何知道使用者点选到了某个输入框？很简单，Web Browser(Ph) 有个函式：InvokeScript，可以让开发者在 Web Browser 读入网页后，呼叫网页中的某个 JavaScript，原意是想让开发者在使用 NavigateToString、Navigate 浏览本机网页时能有个沟通的管道。

Web Browser(Ph) 将此技术发挥到极致，经测试得知，InvokeScript 其实不仅只能在浏览本机网页，浏览一般网页时也可正常运作，这意味着 Web Browser(Ph) 可以在使用者浏览网页后，以 InvokeScript 来呼叫特定的 JavaScript 函式，那这有什么用呢？

细想一下，有哪个 JavaScript 函式可以让你列举出网页上所有的 input type=text 控件？ document.getElementsByTagName !!

但此路不通，因为 InvokeScript 仅能呼叫函式，像 getElementsByTagName 这种挂在某个对象下的函式是无法透过 InvokeScript 呼叫的。

所以我们得找另一条路，有哪个函式可以让 InvokeScript 正常呼叫，又能达到与 getElementsByTagName一样的效果？答案很明白，就是 eval 函式，这个函式可以让我们执行大多数的 JavaScript 程序代码，这便是 Web Browser (Ph) 所仰赖的关键技术。

关于 Tel/Sms Tag Web Browser 控件很强，但是其有一点与内建的 IE 不同，那就是在内建的 IE 下是可以解析 Tag 的，透过这个机制，使用者可以在浏览到使用此 Tag 的网页时，点选该链接来拨出电话，但 Web Browser 控制项目前并不支持这个机制，这是已知的限制。

这些 tel tag 最常出现在搜索引擎的网页，例如 Google Maps。 图1 于内建的 IE 上点选电话部份的链接，会启动拨号动作。 图2 但 Web Browser 控件并不支持这种应用，也就是其不认识 ，要解决这个问题，我们得自己来处理，前面所提到的 InvokeScript+Eval 的技巧，正巧可用上。

首先，我们得想办法在 Web Browser 加载网页后，执行一段 JavaScript，搜索页中所有的 元素，紧接着解析其 href attribute，只要发现是以 tel: 开头，即将其改为 #，并挂上 onclick 事件来处理使用者按下连结的后续动作。

MainPage.xaml x:Class="DetectTelTag.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

VerticalAlignment="Top" Height="537" Width="456" Margin="0,64,0,0" LoadCompleted="webBrowser1_LoadCompleted" /> VerticalAlignment="Top" Width="160" Click="button1_Click" />

MainPage.xaml.cs  using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Net;

 using System.Windows;

 using System.Windows.Controls;

 using System.Windows.Documents;

 using System.Windows.Input;

 using System.Windows.Media;

 using System.Windows.Media.Animation;

 using System.Windows.Shapes;  using Microsoft.Phone.Controls;

 using Microsoft.Phone.Tasks;

 using System.Windows.Threading;



 namespace DetectTelTag

 {

 public partial class MainPage : PhoneApplicationPage

 {

 DispatcherTimer _timer = new DispatcherTimer();

  // Constructor

 public MainPage()

 {

 InitializeComponent();

 _timer.Tick += (s, args) =>

 {

 try

 {

 //呼叫 DetectActiveTel 來偵測使用者是否有按下某個 tel 連結

 string para = (string)webBrowser1.InvokeScript("DetectActiveTel");

 if (!string.IsNullOrEmpty(para))

 {

 //使用者按下了 tel 連結,啟動撥號

 string[] parameters = para.Split(';');

 PhoneCallTask task = new PhoneCallTask();

 task.PhoneNumber = parameters[0];

 task.DisplayName = parameters[1];

 task.Show();

 }

 }

 catch (Exception)

 {

 }

 };

 _timer.Interval = TimeSpan.FromSeconds(1);

 }

  private void button1_Click(object sender, RoutedEventArgs e)

 {

 //必須在 Navigate 前，設定 IsScriptEntabled 為 true 才能使用 InvokeScript

 webBrowser1.IsScriptEnabled = true;

 webBrowser1.Navigate(

 new Uri("http://maps.google.com.tw/?q=Taipei%20101", UriKind.Absolute));

 }