天天看點

執行腳本函數(WebView)

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