将本地JS / CSS文件注入UWP WebView

时间:2018-03-13 08:34:52

标签: c# webview uwp

因为直到知道人们在做什么只是调用实际网页中已经存在的脚本。

    private void LoadHtml()
    {
        WebViewControl.Source = new Uri("https://www.twitter.com");
    }

首先我加载一个我想修改其样式的页面。我可以通过注入应用程序的本地文件夹中提供的CSS文件来完成此操作。

  private async void InvokeScript()
    {
        // Invoke the javascript function called 'addCSS' that is loaded into the WebView.
        try
        {
            string result = await WebViewControl.InvokeScriptAsync("addCSS", null);
            rootPage.NotifyUser($"Script returned \"{result}\"", NotifyType.StatusMessage);
        }
        catch (Exception ex)
        {
            string errorText = null;
            switch (ex.HResult)
            {
                case unchecked((int)0x80020006):
                    errorText = "There is no function called doSomething";
                    break;
                case unchecked((int)0x80020101):
                    errorText = "A JavaScript error or exception occured while executing the function doSomething";
                    break;

                case unchecked((int)0x800a138a):
                    errorText = "doSomething is not a function";
                    break;
                default:
                    // Some other error occurred.
                    errorText = ex.Message;
                    break;
            }
            rootPage.NotifyUser(errorText, NotifyType.ErrorMessage);
        }

然后我会调用addCSS函数。当然这不起作用,因为Twitter.com JS Code没有这个功能。

我想知道的是如何调用一个JS函数,它将一个新的CSS文件放入webview中的当前网页。

1 个答案:

答案 0 :(得分:0)

  

我想知道的是如何调用一个JS函数,它将一个新的CSS文件放入webview中的当前网页。

您可以在项目文件夹中创建一个CSS文件,然后使用InvokeScriptAsync方法调用JavaScript eval 函数,就像后续一样。

<强> MyCss.css

body {
    background-color:rebeccapurple;
}

<强>用法

string functionString = "var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css';  link.href = 'ms-appx-web:///MyCss.css'; document.getElementsByTagName('head')[0].appendChild(link); ";
await MyWebView.InvokeScriptAsync("eval", new string[] { functionString });

请注意WebView仅支持使用ms-appx-web方案的应用包中的内容,以及使用httphttps URI方案的网络内容。它无法与位于apps本地文件夹中的资产一起使用。因此,使用file:///ms-appdata:///ms-appx:///方案将不起作用。