调用WebView的InvokeScriptAsync方法可以通过程序代码来执行HTML内容中的脚本代码,InvokeScriptAsync方法的定义如下:
[RemoteAsync]
public IAsyncOperation<string> InvokeScriptAsync(string scriptName, IEnumerable<string> arguments);
该方法支持异步等待,调用完成后会返回一个string值,如果被执行的脚本函数有返回值,那么脚本函数将以字符串的形式将结果通过InvokeScriptAsync方法返回。在调用InvokeScriptAsync方法时,要注意scriptName参数必须是脚本函数的正确名字,如果函数名错误,将无法执行脚本函数。传递给脚本函数的参数可以通过arguments参数来实现,通常可以使用一个string数组实例来包装要传递的参数,数组中的元素的顺序必须与脚本函数的参数列表的顺序保持一致。例如某脚本函数有两个参数a和b,假设要传递给a的值为"1",传递给b的值为"2",那么string数组实例中第一个元素应为"1",第二个元素为"2"。即:
InvokeScriptAsync("<函数名>",new string[] {"1","2"});
不能写成:
InvokeScriptAsync("<函数名>",new string[] {"2",1"});
因为这样传递的参数的顺序与脚本函数的参数列表不匹配。
下面示例演示如何在代码中调用动态生成的HTML内容中的脚本函数。
示例程序首先在WebView控件中加载HTML内容,然后调用setFontSize函数来设置span元素中文本的字体大小。
应用程序主页面的XAML代码如下:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<WebView x:Name="webView" Margin="2" Loaded="webView_Loaded" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<StackPanel Grid.Row="1" Margin="3" HorizontalAlignment="Center"
Orientation="Horizontal">
<Button Content="字体:小" Tapped="Button_Tapped" Tag="1"/>
<Button Content="字体:中" Tapped="Button_Tapped" Tag="2"/>
<Button Content="字体:大" Tapped="Button_Tapped" Tag="3"/>
</StackPanel>
</Grid>
三个Button控件公用一个事件处理方法,在代码中将通过Tag属性来区分哪个Button被单击。
先要处理WebView的Loaded事件,在事件处理代码中让WebView控件加载动态生成的HTML内容。
private void webView_Loaded(object sender, RoutedEventArgs e)
{
//自定义HTML内容
string html = "<html>" +
"<head>" +
"<title>test</title>" +
"<script type=\"text/javascript\">" +
"function setFontSize(size){" +
"var ele = document.getElementById(\"sptext\");" +
"ele.style.fontSize = size + 'px';" +
"}" +
"</script>" +
"</head>" +
"<body style=\"color:black;background-color:balck;\">" +
"<span id=\"sptext\" style=\"font-size:40px\">" +
"示例文本" +
"</span>" +
"</body>" +
"</html>";
//加载HTML内容
webView.NavigateToString(html);
}
让WebView加载动态建立的HTML内容,应该调用NavigateToStirng方法,调用时传递HTML字符串即可。
然后编写Button_Tapped方法中的代码,调用HTML内容中的脚本函数。
private async void Button_Tapped(object sender, TappedRoutedEventArgs e)
{
var btn = sender as Button;
short tag = Convert.ToInt16(btn.Tag);
string arg = "";
switch (tag)
{
case 1:
arg = "20";
break;
case 2:
arg = "32";
break;
case 3:
arg = "45";
break;
default:
break;
}
btn.IsEnabled = false;
//执行HTML内容中的脚本函数
await webView.InvokeScriptAsync("setFontSize", new string[] { arg});
btn.IsEnabled = true;
}
运行应用程序,分别单击页面下方的三个按钮,会看到WebView的文本的字体大小发生变化。