天天看点

执行脚本函数(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的文本的字体大小发生变化。