如何在WebView的iframe中注入CSS？ UWP

Question

I wonder if it's possible to do something similar in UWP to what Stylish do for browsers because I have wrote a CSS for the web page I'm using inside my WebView but this web page have an iframe so I needed to apply the CSS to all the URLs starting with "https://webchat.botframework.com/" to make it works (on Stylish) 我想知道是否可以在UWP中做一些与时尚的浏览器类似的事情，因为我已经为WebView使用的网页编写了CSS，但是该网页具有iframe，因此我需要将CSS应用于所有网址以"https://webchat.botframework.com/"开头的网址（在Fashion上）

<WebView x:Name="WebView1" Source="https://www.blabla.net/bla/webchat.html" Width="490" Height="490" HorizontalAlignment="Center"/>

Web page code 网页代码

<body>
    <iframe lang="fr-FR" id="chat" style="width: 60vw; height: 95vh; margin-left: 20vw" src=''></iframe>

    <script>
        document.getElementById("chat").src =
            "https://webchat.botframework.com/embed/BitWcVaClient2?userid=" + create_UUID() +
            "&username=WW&v=4.2&l=fr-FR&s=ceraZE8go0A.lpa7tzuJ1H_rOJdJKWXibqg_aBrVQrHhhd432kU2e-M";

        function create_UUID() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
    </script>
</body>

Answer 1

You can write a js script and use js to do css injection.Then run the script using the eval function via InvokeScriptAsync.But the injection is to add new things to the original web page, so every time the web page is loaded, the process of injecting is repeated which means the InvokeScriptAsync will be triggered every time.You can write the following code in DOMContentLoaded of WebView. 您可以编写一个js脚本并使用js进行css注入，然后通过InvokeScriptAsync使用eval函数运行该脚本，但是注入是在原始网页中添加新内容，因此每次加载该网页时，该过程重复注入的过程意味着每次将触发InvokeScriptAsync 。您可以在WebView的DOMContentLoaded中编写以下代码。

string styleContent = "here is style content";
string injectContent = $"var st= document.createElement('style');document.body.appendChild(st);st.innerHTML = `{styleContent}`;";
await TestWeb.InvokeScriptAsync("eval", new string[] { injectContent });

Update: 更新：

If you want to inject CSS inside an iframe,you can use the following js code to inject.The 'chat' is the name of iframe,you need to add a name to iframe. 如果要在iframe中注入CSS，可以使用以下js代码进行注入。“聊天”是iframe的名称，需要在iframe中添加一个名称。

private async void WebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    string cssContent = "body{background:black;}";
    string eval = "var frame = window.frames['chat'];" +
                  "var style = frame.document.createElement('style');" +
                  "frame.document.body.appendChild(style);" +
                  $"style.innerHTML = {cssContent}; ";
    await sender.InvokeScriptAsync("eval", new string[] { cssContent });
}

如何在WebView的iframe中注入CSS？ UWP

问题描述

1 个解决方案

解决方案1
1 2019-08-19 09:13:25

如何在WebView的iframe中注入CSS？ UWP

问题描述

1 个解决方案

解决方案1 1 2019-08-19 09:13:25

解决方案1
1 2019-08-19 09:13:25