×
Namespaces

Variants
Actions

Windows Phone中的WebBrowser控件

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
WS - OtomiiLu
最后由 hamishwillee 在 18 Jul 2013 编辑

这篇百科文章展示了如何使用Windows Phone WebBrowser控件。这包括基本应用,也包括将控件深度集成到C#代码中这样的高级技术。

Contents

简介

Screen.png

WebBrowser 控件能够用于以显示Windows Phone应用中基于web的内容(HTML,CSS,JS)。 尽管是一个功能完善的网络浏览器,它仍可被用作简单web应用的基础.Qt开发者将WebBrowser看作是QWebView的等值控件。 你可以在以下情形中使用: - 显示已从网络上加载的Web内容 (例如天气或者Facebook插件) - 显示嵌入到你应用程序包的静态Web内容 - 显示动态生成的内容,其中一部分来自于C#代码,一部分是从网络加载的 - 创建混合应用,即你应用界面中的一部分是标准的Silverlight中的东西,而一部分是基于web的。在某些情况下,用户甚至不知道那些内容是基于web的,哪些不是

基本应用

如果你只想在你的应用中显示网页,那就太简单了。你只需在你的.xaml文件中加入WebBrowser组件,并在.xaml.cs 代码中调用它的Navigate method 方法。

<phone:WebBrowser HorizontalAlignment="Stretch" Name="webBrowserControl" VerticalAlignment="Stretch"/>
// Constructor
public MainPage()
{
webBrowserControl.Navigate(new Uri("http://www.developer.nokia.com/"));
}

如果你想在你的web控件中使用JavaScript,你必须将IsScriptEnabled 属性设置为true。默认情况下,JavaScript是不可用的。你可能也想用IsGeoLocationEnabled 控件来使用HTML5定位服务。请注意,如果你将这项功能打开,你的应用中也需要具备定位能力。

webBrowserControl.IsScriptEnabled = true;
webBrowserControl.IsGeolocationEnabled = true;

高级应用

通过WebBrowser控件,你能够创建功能更加完善的Web浏览器,甚至将C#代码和JavaScript代码混合。我们先来看导航堆栈。

导航

如果你想控制用户在web控件中导航的方式,你应该知道以下几个事件: 1. Navigating. 当浏览器开始导航到新的url时,这个事件被触发。该事件将 NavigatingEvetArgs作为参数,如果你想阻止用户跳转到特定的url,那么将Cancel属性设置为true 2. Navigated. 该事件发生于网站被找到、设备成功加载web内容后 3. LoadCompleted 该事件在网站所有内容(图片、外部脚本、外部样式表文件等)被加载后触发

我们能够用到Navigated 事件的一个例子就是:通过设备上的返回按键来实现浏览器的返回功能。在代码中我们需要做如下工作: 创建一个数据结构,被访问过的url作为数据成员。在这种情况下堆栈应该是有用的。

public partial class MainPage : PhoneApplicationPage
{
Stack<Uri> _navigationStack = new Stack<Uri>();
...

- 在构造函数中注册,监听Navigated事件。

webBrowserControl.Navigated += new EventHandler<NavigationEventArgs>(WebControlNavigatesTo);

创建Navigated 事件的事件处理程序,当事件发生时,将url存储到堆栈中。

void WebControlNavigatesTo(Object sender, NavigationEventArgs navArgs)
{
_navigationStack.Push(navArgs.Uri);
System.Diagnostics.Debug.WriteLine("WebControlNavigatesTo:" + navArgs.Uri.AbsoluteUri);
}

我们为设备的后退按键创建一个处理程序 如果用户按下后退按键,我们从堆栈中取出url并要求web控件跳转到上一url。 如果在第一页,用户按下后退按键,我们需要默认操作(退出应用)。

protected override void OnBackKeyPress(CancelEventArgs e) { 
base.OnBackKeyPress(e);
 
if (_navigationStack.Count() >= 2)
{
_navigationStack.Pop();
webBrowserControl.Navigate(_navigationStack.Pop());
e.Cancel = true; // This prevents the default functionality of the back button.
}
}

完成这些变更后,设备的后退按键就像标准浏览器的后退按键一样起作用了。

从C#中调用JavaScript代码

它还有可能从C#中调用JavaScript代码。有一个称为InvokeScript的方法可以使用。假如你不需要传递任何的参数,你可以使用它仅仅带有JavaScript函数名:

webBrowserControl.InvokeScript("JSFunctionNameHere");

或者假如你想要传递参数,参数被存储在字符串数组中:

webBrowserControl.InvokeScript("JSFunctionNameHere", new string[] { "parameter1" });

你也可以调用JavaScript函数eval(),给予JavaScript代码作为参数。

webBrowserControl.InvokeScript("eval", new string[] { "javascriptcode.you.want.to.eval.goes.here :)" });

Sample application 示例应用程序

Screen2.png

我已经创建了一个示例应用程序和一个html代码,演示我们上面讨论的所有东西。示例应用程序从网络加载this html. 从这儿下载示例代码: File:AdvancedWebBrowserControl.zip

说明: - 启动这个应用程序 - 假如你按下屏幕上的按键,在"C#-side"端的将被调用(在类MainPage中)。()JavaScript代码调用C#代码。)它将显示MessageBox对话框。假如你看到代码,你就会发现传递参数也是可能的。 - 从屏幕上你可以找到两个应用程序栏按钮。假如你按下左侧的按钮, - JavaScript函数将从C#端调用。(C#代码调用JavaScript)代码将自动添加一些文本到WebBrowser's DOM树。 - 假如你按下了右边的按钮,应用程序导航到Nokia端口,你可以测试后退按钮的功能。

总结

感谢你阅读这篇文章。请记住去看示例应用程序和观看网页(html)代码. 假如你有任何意见或疑问,请看下面的注释框。

This page was last modified on 18 July 2013, at 08:30.
170 page views in the last 30 days.