Reputation: 17482
Html
page content on being load Webview
using LoadDataWithBaseURL
and it displays a page which I need. In this page when I click a button, it takes me to second page. Only second page having problem, this is just displaying plain html
controls, there is no CSS
.
Left screenshot is coming and right one is expected
Below is the Webview sample code
Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}"));
Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
Control.Settings.AllowFileAccess = true;
Control.Settings.JavaScriptEnabled = true;
Control.Settings.AllowFileAccessFromFileURLs = true;
Control.Settings.AllowUniversalAccessFromFileURLs = true;
Control.Settings.AllowContentAccess = true;
Control.Settings.DomStorageEnabled = true;
Control.SetWebChromeClient(new WebChromeClient());
Control.LoadDataWithBaseURL("https://service.force.com/embeddedservice/5.0/esw.min.js", content1, "text/html; charset=utf-8", "UTF-8", null);
here the content loading on Webview
initially which has html
and JavaScript
.
How can I fix this issue ?
Edit 1 : This is how I am trying to load styles
inside head tag
of above mentioned html content file. I tried many combination using rel type
also. Nothing seem to be working.
//1
<base href="/">
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css"/>
//2
<base href="/">
<link href="salesforce-lightning-design-system_touch-demo.css" type="text/css"/>
//3
<base href="/">
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css" crossorigin="anonymous" />
//4
<link href="salesforce-lightning-design-system_touch-demo.css" type="text/css" />
//5
<link href="/salesforce-lightning-design-system_touch-demo.css" type="text/css">
//6
<link href="file:///android_asset/salesforce-lightning-design-system_touch-demo.css" type="text/css" />
When I tried <link rel="stylesheet" href="test.css" />
, its working in chrome browser
but not working in mobile application.
Upvotes: 2
Views: 699
Reputation: 11110
You can use an alternative way by injecting css styles. I am proud to share an example usage with you. You can use it in Activity or fragment. Converting to Kotlin will be easy.
For Sample Java code
mWebView = new WebView(MainActivity.this);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
mWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
final Activity activity = this;
mWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
// Activities and WebViews measure progress with different scales.
// The progress meter will automatically disappear when we reach 100%
activity.setProgress(progress * 1000);
}
@Override
public void onPermissionRequest(final PermissionRequest request) {
// Log.d(TAG, "onPermissionRequest");
// As we are targeting Android 21, there's no need to prompt for permission.
// Just go ahead and grant the permission here.
request.grant(request.getResources());
}
});
mWebView.setWebViewClient(new WebViewClient() {
public void onReceivedError(WebView view,
int errorCode,
String description,
String failingUrl) {
Toast.makeText(activity, "Oh! " + description, Toast.LENGTH_SHORT).show();
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
// Ignore SSL certificate errors - DANGEROUS, JUST FOR NOW
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// Clear out speech hooks, etc. when the page is loaded
// Log.i(TAG, "onPageStarted: Clearing user handlers!");
// if (mSrec != null) mSrec.clearUserHandlers();
}
@Override
public void onPageFinished(WebView view, String url) {
injectCSS(); // TODO < YOUR INJECT CSS
super.onPageFinished(view, url);
}
});
mWebView.setId(View.generateViewId());
layout.addView(mWebView, 0);
}
private void injectCSS() {
try {
mWebView.evaluateJavascript(
"javascript:(function() {" +
" console.log('Injecting code');" +
" let style = document.createElement('style');" +
" style.type = 'text/css';" +
" style.innerHTML = '" +
" head {" +
" -webkit-transform: translate3d(0, 0, 0);" +
" transform: translate3d(0, 0, 0);" +
" };" +
" body {" +
" -webkit-transform: translate3d(0, 0, 0);" +
" transform: translate3d(0, 0, 0);" +
" };';" +
" document.head.appendChild(style);" +
" document.body.appendChild(style);" +
"})()",
null
);
} catch (Exception e) {
e.printStackTrace();
}
}
Or
SalesForce Documents
embedded_svc.settings.externalStyles = ["...", “...”]
Specify your resources using the static resource name, not the file name itself. For example, if you upload CustomEvent.css and give it the name CustomEventCSS, enter CustomEventCSS.
For Javascripts
embedded_svc.settings.externalScripts = ["...", “...”]
Upvotes: 1
Reputation: 627
Try loading CSS files like this or use internal css.
embedded_svc.settings.externalStyles = ["...", “...”]
Source link
Upvotes: 1