Silverlight 4 WebBrowser的使用及调用 WebBrowser 中的 javascript 方法
下面是MSDN的使用说明：
The following example shows how to handle the ScriptNotify event. In this example, the InvokeScript is called, which in turn calls the LoadSearch function in the following HTML.
The HTML file must be hosted in the same domain as the Silverlight application. The Javascript within the HTML page calls window.external.notify,
which raises the ScriptNotify event in the Silverlight application
必须在同一个域下才可用哦！
example：
The following example shows how to handle the ScriptNotify event. In this example, the InvokeScript is called, which in turn calls the LoadSearch function in the following HTML. The HTML file must be hosted in the same domain as the Silverlight application. The Javascript within the HTML page calls window.external.notify, which raises the ScriptNotify event in the Silverlight application.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" >
function LoadSearch(searchString) {
window.location = "http://www.bing.com/search?q=" + searchString
window.external.notify("Search completed")
}
</script>
</head>
<body>
Silverlight WebBrowser control.
</body>
</html>
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
void WB1_ScriptNotify(object sender, NotifyEventArgs e)
{
Button1.Content = e.Value;
Button1.IsEnabled = false;
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
object results = WB1.InvokeScript("LoadSearch", new string[] { "Silverlight" });
}
}
<div
class
=
"cnblogs_code"
><pre><div><span style=
"color: #000000;"
>XAML <br><br></span><span style=
"color: #000000;"
><</span><span style=
"color: #000000;"
>StackPanel x:Name</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">LayoutRoot</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Height</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">358</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Width</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">489</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Background</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">LightBlue</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
>></span><span style=
"color: #000000;"
><br> </span><span style=
"color: #000000;"
><</span><span style=
"color: #000000;"
>WebBrowser x:Name</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">WB1</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Source</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">http://localhost/HTMLPage1.htm</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Height</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">272</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Width</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">379</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> <br> ScriptNotify</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">WB1_ScriptNotify</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Margin</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">5</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> </span><span style=
"color: #000000;"
>/></span><span style=
"color: #000000;"
><br> </span><span style=
"color: #000000;"
><</span><span style=
"color: #000000;"
>Button Width</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">200</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> x:Name</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">Button1</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Content</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">Click to search!</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> Click</span><span style=
"color: #000000;"
>=</span><span style=
"color: #800000;"
>
"</span><span style="
color: #800000;
">Button1_Click</span><span style="
color: #800000;
">"
</span><span style=
"color: #000000;"
> </span><span style=
"color: #000000;"
>/></span><span style=
"color: #000000;"
><br></span><span style=
"color: #000000;"
></</span><span style=
"color: #000000;"
>StackPanel</span><span style=
"color: #000000;"
>></span></div></pre>
</div>
<br>
|
详细实例请看下文（是一个外国家伙写的,很简单一看就懂的，不翻译了）：
Until version 4, Silverlight does not really have a mechanism for displaying HTML based content.
Prior to version 4, you can have Silverlight controls and HTML UI co-existing in the browser and they can interoperate with each other in a rich way. You can even use transparency and windowless techniques to overlay them but you can’t really ask a Silverlight application to display HTML for you. You always have to get it done elsewhere and, furthermore, if you then packaged your application to run as a Silverlight Out-Of-Browser (SLOOB) app then those techniques wouldn’t help as you lose the ability to display HTML at all.
That changes with version 4 with the new WebBrowser control ( WPF also has a Frame and a WebBrowser control which both offer levels of HTML hosting ability – the Silverlight WebBrowser looks like a subset of the WPF version ).
The first thing to say about the WebBrowser control is that it only functions in Silverlight Out-Of-Browser applications ( SLOOBs ) – in the browser the control displays a blank UI so an application developer/designer would need to think about how that would work if the application can also be run within a browser window.
For an out-of-browser application, I can put a simple UI together;
<UserControl x:Class="SilverlightApplication16.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid
x:Name="gridControls">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox
x:Name="txtUri"
Margin="5"
HorizontalAlignment="Stretch" />
<Button
x:Name="buttonGo"
Grid.Column="1"
Content="Go"
Click="OnGo"
Margin="5" />
</Grid>
<WebBrowser
LoadCompleted="BrowserLoadCompleted"
Grid.Row="1"
Margin="5"
x:Name="browserControl" />
</Grid>
</UserControl>
and then add a little code-behind that;
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;
namespace SilverlightApplication16
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void OnGo(object sender, RoutedEventArgs e)
{
buttonGo.IsEnabled = false;
browserControl.Navigate(new Uri(txtUri.Text, UriKind.Absolute));
}
private void BrowserLoadCompleted(object sender, EventArgs e)
{
buttonGo.IsEnabled = true;
}
}
}
and ( out of browser ) that allows me to navigate to some HTML;
What might not be immediately obvious is that myPage.htm is part of the same web-site that the application originally came from ( i.e. site-of-origin ) and that an attempt to navigate to any site might fail ( subject to cross-domain policy ).
That can be circumvented by having the application also elevate itself. If the application is elevated then cross-domain policy isn’t applied and so we can go anywhere as in the example below ( the application now having been installed as anelevated SLOOB );
You might notice that in this example this is me with my out-of-browser application visiting Microsoft.com which is made up of HTML and Silverlight. So…we have one Silverlight application hosting HTML which hosts another Silverlight application. Similarly, I can visit sites that have “other plugins” like the Flash site below;
I’m not sure how much/little this control is integrated into the Silverlight rendering engine. I tried ( for fun ) applying aPlaneProjection to it and that didn’t really work out so I’m not sure that you’re meant to use the control in this way ( more on doing fancy things with HTML without trying to bend the control in a moment but back to regular stuff for a second… )
What you can also get the control to do is load HTML at runtime via its “NavigateToString” method so if I just change my code;
private void OnGo(object sender, RoutedEventArgs e)
{
buttonGo.IsEnabled = false;
browserControl.NavigateToString(txtUri.Text);
}
Now, in the WPF version of this control there are two other “interesting” functions on the control. One is called InvokeScriptand that exists on the Silverlight control and can be used to invoke a piece of script inside the control.
This isn’t intended to work if you use the Navigate method but there’s another way to set the URL which is the Sourceproperty and so I can re-jig my code a little bit such that the code-behind looks like;
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void OnGo(object sender, RoutedEventArgs e)
{
buttonGo.IsEnabled = false;
browserControl.Source = new Uri(txtUri.Text, UriKind.Absolute);
}
private void BrowserLoadCompleted(object sender, EventArgs e)
{
browserControl.InvokeScript("ChangeText", "Done");
buttonGo.IsEnabled = true;
}
}
<html>
<head>
<script type="text/javascript">
function ChangeText(text) {
document.getElementById("myDiv").innerText = text;
}
</script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
</html>
and so the Silverlight control loads the HTML and then runs the script which changes the DOM inside of the HTML. Note that this isn’t possible for cross-domain content.
It’s also possible to communicate “back” from the hosted Javascript to the Silverlight control although it’s not as functional as it is in WPF. If I re-work my HTML code to look like;
<html>
<head>
<script type="text/javascript">
function buttonClick()
{
window.external.Notify("They clicked!");
}
</script>
</head>
<body>
<input type="button" value="test" onclick="buttonClick()" />
</body>
</html>
View Code
with code-behind;
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;
namespace SilverlightApplication16
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void OnGo(object sender, RoutedEventArgs e)
{
buttonGo.IsEnabled = false;
browserControl.Source = new Uri(txtUri.Text, UriKind.Absolute);
}
private void BrowserLoadCompleted(object sender, EventArgs e)
{
buttonGo.IsEnabled = true;
}
private void OnScriptNotify(object sender, NotifyEventArgs e)
{
txtStatus.Text = e.Value;
}
}
}
then that allows the hosted Javascript to communicate through the WebBrowser control via the call towindow.external.Notify() which gets picked up on the .NET side by the ScriptNotify event on the WebBrowser control and I just handle it in a little handler and change the text on my txtStatus TextBlock to represent whatever was passed from Javascript ( this is running out-of-browser but not elevated ).
The other “interesting” aspect of the HTML support is that Silverlight 4 also has an HTMLBrush which can take HTML content and paint areas so, whilst my previous attempt to integrated the WebBrowser control with the PlaneProjection system didn’t work very well, I can paint arbitrary areas with a brush. So, if I’ve got a little UI;
View Code
with some code behind it ( note – I feel I should be able to set the WebBrowser.Source property from XAML but it’s not working for me at the time of writing );
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;
namespace SilverlightApplication18
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += (s, e) =>
{
myBrowser.Source = new Uri("http://www.microsoft.com", UriKind.Absolute);
};
}
private void OnRedraw(object sender, RoutedEventArgs e)
{
myBrush.Redraw();
}
}
}
Note – this isn’t a VisualBrush and so it doesn’t do “live updates”. You’ll notice the Redraw button and the call toHtmlBrush.Redraw and that’s the mechanism for keeping things in sync so it’s more like a snapshot than anything else but pretty interesting regardless.