I'm using a WebView to display some (locally stored) HTML. The WebView automatically converts various parts of the text to clickable links; this is somewhat useful for web addresses, etc. but it often unfortunately mistakes numbers (especially years) in the page as phone numbers and turns them into links also.
Assume I am happy to disable all links in the page. Visually, I can get part-way there by applying various CSS styles, in particular, setting appropriate values for -webkit-touch-callout and -webkit-tap-highlight-color will make the links appear as normal text. I can then set a custom WebViewClient which overrides shouldOverrideUrlLoading(WebView view, String url) (returning true) to prevent the WebView loading the URL.
For touch access, this works fine and certainly gives the impression that there are no links in the page. However, if used on a device with a trackball/directional pad we can still focus on each of the links, and an orange border appears around them.
Is there any way to (ideally) have more control over the auto-linking 'feature' of a WebView, or otherwise stop links from being visually focused when using a directional pad?
Related
I am building an app where in a Detail Activity I have to show a web page.
I was going to use WebView, but then I saw Chrome Custom Tab.
What do you guys think it's better to implement and why?
If you just want to show a certain page then I would suggest you use chrome custom tabs. You can style the toolbar in a way it resembles your app style and they are intended for showing content without you having to worry much about anything else.
if you want to have full control over what the user is doing inside this website you have to use a webview. (you can prevent the user clicking links on the webview, you could intercept data the user inputs into controls on the website...)
But this can also be a negative aspect since the user really has to trust you that you don't log his data or even fiddle with it.
summary: "The WebView is good solution if you are hosting your own content inside your app. If your app directs people to URLs outside your domain, we recommend that you use Chrome Custom Tabs"
-> If it isn't your website you probably should go with custom tabs.
https://developer.chrome.com/multidevice/android/customtabs#whentouse
Webview : If you want your own content which has click listeners and data interception you need to go to webview. But It wont share the state with the browser.
Chrome Custom tab : If You are just redirecting to a url, i prefer chrome custom tab. But it has little cons too. We wont change its title text color where we can change the titlebar color. The text color will be chosen by the theme color only. And We can add actions, but we cant change the overflow menu icon or the entire actions displayed in the overflow action.
Even though the limitation are not a big deal. I recommend chrome custom tab over webview.
I'm developing an application that requires somewhat complex html rendering (basically text and images, but the text may have some advanced features like custom font and path) and I'm using webviews to render the content.
The problem is that some of the pages doesn't render text in some devices.
I'm using all three callbacks:
onPageFinished;
onProgressChanged;
onNewPicture (deprecated, but some users related that it works)
but even if they're triggered I get a WebView that is missing the text in most of the pages. On some devices when I touch the webview the text appears, but it's an erratic behaviour that can't be trusted.
I also tried called invalidate() constantly but it doesn't force the text to draw. I'm logging the webview console and apparently it's not throwing any error (notice that sometimes the text is rendered perfectly and the problem occurs for pages that rendered correctly before). I'm configuring my webview like (I know that some methods are deprecated, but some other solutions related that it worked for then):
offScreenWebView.layout(0, 0, viewPortWidth, viewPortHeight);
offScreenWebView.getSettings().setUseWideViewPort(true);
offScreenWebView.getSettings().setLoadWithOverviewMode(true);
offScreenWebView.getSettings().setTextZoom(100);
offScreenWebView.setDrawingCacheEnabled(true);
offScreenWebView.getSettings().setJavaScriptEnabled(true);
offScreenWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
offScreenWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
offScreenWebView.enableSlowWholeDocumentDraw();
}
I'm at loose now, because I've no clue why the text doesn't render and it seems I can't force it to render.
I've managed to somewhat solve my problem. The main issue I was having was due to the webviews were being loaded simultaneously (they're used at a viewpager) and probably this incurred in some concurrency problem when the webviews were loading the font. I encapsulated the URL loading and ensured that the webviews were loaded one page at a time.
Also, when destroying the webviews I couldn't call any method like cancelTimer, this resulted in problems when rendering other pages with similar font. The only thing I did was to point the references to null.
It's somewhat slow but at least it was the only way to get consistent rendering results using the webviews.
This is probably due to the latest update to Android System Web View, that comes automatically from Google Play. If you uninstall the update, it helps. It is of course not a really good solution((((
Another workaround is disable HW accelleration in the webview
I have a PhoneGap app which immediately does a window.location = 'http://example.com' and then continues to work from the web site. It works great... except that on Android my fonts are behaving strangely. I am using a couple of web fonts, loaded using:
<link href="http://webfontpath/blah.css" rel="stylesheet">
This works great when I look at the site on the web, and when I load it in the PhoneGap app on iPhone. On Android, however, characters in both of these fonts just show up blank. At least, they do until I click on one of my buttons, at which point the fonts magically spring into view and remain there through the rest of the time the user is in the app.
I originally thought it was a CORS problem but I've checked and I do already have access origin set to "*" in confg.xml. Also, if it was a security thing, it doesn't really make sense them popping up when I click on the page.
I have also tried copying one of these fonts to a folder on my own site and referring to it there instead - the behaviour remains the same.
I was thinking that maybe PhoneGap is displaying the page to me before the fonts have actually loaded, so I added some Javascript to refresh the page after five seconds, but that doesn't update the fonts. Really it seems like I actually have to click a button on the screen.
I know this all sounds very odd but, well, it is.
I don't have a definite answer, but maybe a possible workaround.
perhaps the render of :before and :after is before the font is ready, in which case it renders blank. If you force a redraw it should fix, which it does when you click. Try the below
$(document).ready(function() {
var $style;
$style = $('<style type="text/css">:before,:after{content:none !important}</style>');
$('head').append($style);
return setTimeout((function() {
return $style.remove();
}), 0);
});
I'm developing a mobile app in jQueryMobile and PhoneGap. Often, due to the nature of jQM or because it's about loading data, a page will need some last-minute adjustments before it is shown. For example, form fields need to be filled in with dynamically retrieved data, or the contents of list items need to be given a slightly different style in order to fit better.
I am currently doing all these adjustments using the pageBeforeShow event handler. But I wonder if I shouldn't have been using the pageBeforeChange event handler. The jQM docs do not really make it clear how these two events relate to each other, i.e. which is fired first.
What I know
I do know the following
pageBeforeShow and pageShow are triggered after all of jQM's markup (e.g. making list items look pretty) has been applied.
pageBeforeShow and pageShow are bound to a specific page, whereas pageChange is called whenever a change of page occurs (so if you want to make specifi changes to one page before the user gets there, you need to test the event.toPage property)
Why I'm asking
And this is the background why I want to know if page(Before)Change is a better candidate.
jQuery Mobile page transitions are awkward on many devices. The big issue on Android devices is that page changes are jumpy: regardless of the transition type (fade, pop, etc), the page being left by the user will pop back into view briefly after the new page has more or less finished in the browser.
In my experience, this occurs mostly when other animations are running or are started while the page transition takes place. Basically, the Android browser doesn't seem to want to apply transitions to elements that are not actually in view, and it will flip back and forth between jQM pages as a result.
I've already developed a workaround where I delay any markup and form adjustments for a page by about 1000ms, which prevents the flashing but does mean that the user may be seeing these adjustments happen on screen after the page has come into view.
This analysis makes me think that pageBeforeChange might be a better candidate for attaching any markup and form adjustments. But it will be a big rewrite of the code, and I don't know what unforeseen stuff I will be getting into. Anyone have any experience with these events?
I'm not sure pagebeforechange would be the best place to do this. I don't see pagebeforechange as a page-level event, but more of a site-level event. I use it mainly if I want to take over navigation or to build dynamic pages.
I use pageinit when I want to attach event handlers to a page. I use pagebeforeshow when I want to change the contents or look of a page before it is shown.
Hope this helps.
I'm developing an application which is mainly a webview and will display a JQTouch UI. Two of the 3 views work just fine, however, I have a view which loads another page with a form which does not work at all. This view loads up just fine but when I click the link to go to the form the link just stays highlighted and nothing happens. I have overriden all of the methods in webviewclient and webchromeclient and placed breakpoints within with no luck. None of the hooks catch when I click the links.
The part that truly confounds me is that it works in the phones browser but not in my webview. Is there a setting on webview that I may be missing which would make it act like the phones browser?
Any help or suggestions would be appreciated.
The fix for this was to override onLoadResource as the link was being treated as a resource and not a new page load. I tried calling webView.loadUrl right in the override of loadREsource but that caused an endless loop so I had to write some logic to load the url properly into my webView. This seems a bit hacked but it works.