在Xamarin表单中的WebView中将CSS包含在具有源URL(iOS& Android)的地方 [英] Include CSS within WebView in Xamarin Forms with a Source URL (iOS & Android)
问题描述
我正在尝试在xamarin表单的Web视图中包含一些自定义CSS,以便可以使用CSS样式,更改颜色或其他CSS样式类对正在使用的网站进行自定义.
I am trying to include some custom css within a webview on xamarin forms so the website being used can be customized with css styles, changing colors or other css style classes.
我已经在Xcode和Android Studio中使用本机代码之前完成了此操作,但是该项目正在使用xamarin表单和Visual Studio.
I have done this before using native code in Xcode and Android Studio, however this project is using xamarin forms and visual studio.
我相信我们需要做的是在用于Android和ios的自定义Webview渲染器中包含CSS. (如果有更简单的方法,也不会感到惊讶).
I believe what we need to do is include css within a custom webview renderer for android and ios. (would not be surprised if there was an easier way).
我尝试了各种在线显示的方法,但找不到解决方案.在线搜索有一些方法,但是不适用于xamarin形式.
I have tried various methods being shown online and can not find a solution. Searching online there are some methods however they are not for xamarin forms.
以下是我的xaml的代码段:
Below is a snippet of my xaml:
<WebView x:Name="WebView" Source="https://odapps.org/" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Navigating="WebViewTesti_OnNavigating"/>
我的xaml.cs的另一段代码:
Another snippet of my xaml.cs:
public WebViewPage()
{
InitializeComponent();
CheckConnectivity();
WebView.Navigated += WebView_Navigated;
}
我正在尝试使用google.com之类的外部源URL加载内联CSS样式.
I am trying to have inline css styles load while using an external source url like google.com.
对于那些好奇的人,这是我在xcode和android studio中完成的操作,但对于Xamarin Forms则需要它:
For those curious, this is how I have done it in xcode and android studio, but need it for Xamarin Forms:
Xcode:
ViewControllers file within xCode
let cssString = "*:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; } footer{display:none;}"
Android Studio:
Android Studio:
public void onPageFinished(WebView view, String url)
view.loadUrl("javascript: $('.footer,#sg-smartbanner').css('display','none')");
推荐答案
您可以使用自定义渲染器并在iOS中加载CSS样式.
You can use Custom Renderer and load the CSS style in iOS.
using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(WebView), typeof(myWebRender))]
namespace xxx.iOS
{
class myWebRender : WebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{ // perform initial setup
UIWebView myWebView = (UIWebView)this.NativeView;
}
}
private void LoadFinished(object sender, EventArgs e)
{
//. . .
NSString jsStr= new NSString("xxx");
webView.EvaluateJavascript(jsStr);
}
}
}
对于Android而言,您只需要以表格的形式实现它即可.
And for Android , you just need to implement it in forms.
webView.Navigated += WebView_Navigated;
private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
var webview = sender as WebView;
var jsString = "$('.footer').css('display','none')";
webview.Eval(jsString);
}
更新
在android中,默认情况下,webview会阻止JS事件.因此,您可以使用自定义渲染器
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using xxx;
using xxx.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebViewRenderer))]
namespace xxx.Droid
{
public class MyWebViewRenderer:WebViewRenderer
{
public MyWebViewRenderer(Context context):base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
base.OnElementChanged(e);
if(Control!=null)
{
Android.Webkit.WebView webview =(Android.Webkit.WebView) Control;
WebSettings settings = webview.Settings;
settings.JavaScriptEnabled = true;
}
}
}
}
这篇关于在Xamarin表单中的WebView中将CSS包含在具有源URL(iOS& Android)的地方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!