×
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 05:30.
185 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×