調用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的文本的字型大小發生變化。