Hi everyone, I have implemented the font size with slider functionality in Xamarin Forms webview. Normally, the height of webview doesnt auto-fit content size, so I have used a custom renderer exploiting the OnPageFinished. Additionally, I used Javascript to return document.body.scrollheight and set the heightrequest of webview (since setting webview.ContentHeight was incorrect to fit the webview content).
[assembly: ExportRenderer(typeof(ExtendedWebView), typeof(ExtendedWebViewRenderer))]
namespace MyApp.Droid.Renderers
{
public class ExtendedWebViewRenderer : WebViewRenderer
{
public static int _webViewHeight;
static ExtendedWebView _xwebView = null;
WebView _webView;
public ExtendedWebViewRenderer(Context context) : base(context)
{
}
class ExtendedWebViewClient : WebViewClient
{
WebView _webView;
public async override void OnPageFinished(WebView view, string url)
{
_webView = view;
if (_xwebView != null)
{
if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
{
view.EvaluateJavascript("(function(){document.getElementsByTagName('body')[0].style.marginBottom = '0';return document.body.scrollHeight;})()", new MyJavaScriptResult());
}
else
{
view.LoadUrl("(function(){document.getElementsByTagName('body')[0].style.marginBottom = '0';return document.body.scrollHeight;})()");
}
int i = 10;
view.Settings.JavaScriptEnabled = true;
while (view.ContentHeight < 100 && i-- > 0)
{
await Task.Delay(100);// wait here till content is rendered
}
//_xwebView.HeightRequest = view.ContentHeight;
MessagingCenter.Subscribe<MyJavaScriptResult, int>(this, "SetWebViewHeight", (sender, args) =>
{
// setting webview heightrequest from javaScriptResult sent using MessagingCenter.Send
_xwebView.HeightRequest = args;
});
}
base.OnPageFinished(view, url);
}
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
base.OnElementChanged(e);
_xwebView = e.NewElement as ExtendedWebView;
_webView = Control;
if (e.OldElement == null)
{
_webView.SetWebViewClient(new ExtendedWebViewClient());
}
}
}
class MyJavaScriptResult : Java.Lang.Object, IValueCallback
{
public MyJavaScriptResult()
{
}
public void OnReceiveValue(Java.Lang.Object value)
{
string jsonString = string.Empty;
try
{
jsonString = (string)value;
int result = Int32.Parse(jsonString);
MessagingCenter.Send(this, "SetWebViewHeight",result);
}
catch (FormatException)
{
Console.WriteLine($"Unable to parse '{jsonString}'");
}
}
}
}
My problem is after including the font-size change feature, my height is incorrect ie., more such that blank space is seen after webview content when I increase or decrease font. I tried two possible ways I knew - (1) setting font by zooming the Android.Webkit.Webview's view.Settings.TextZoom = args;
where args is given in % like zoom 100%, 150% etc.., (2) Modifying the original HtmlWebviewSource by adding style (<style> body { font-size: large/small;} </style>
) in head tag dynamically and reloading the webview. Both on increasing/decreasing font leves blank space at bottom - because height is very large in (Javscript document.body.scrollheight
) calculation while debugging
What I am missing..? What should I modify. Please assist. Thanks in advance
NOTE: My HTML has images and text, so I can't use HTMLlabel plugin