![](/img/trans.png)
[英]How to inject webkitRequestFullscreen() into UWP WebView
[英]How to inject CSS inside an iframe in a WebView? UWP
我想知道是否可以在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"/>
網頁代碼
<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>
您可以編寫一個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 });
更新:
如果要在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 });
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.