Question

I have a WebView wherein I would like anchor tags with rel=external to open in the Android browser but all other links to stay in the WebView.

So the content will load within the WebView if the user taps a link whose markup looks like this:

<a href="http://example.com/">Whatever</a>

But the content will load in the Android browser if the user taps a link whose markup looks like this:

<a href="http://example.com/" rel="external">Whatever</a>

Here’s my relevant code (with one bit of pseudocode identified with a comment) in the WebViewClient code:

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (! rel=external) {   //  <-- That condition...how do I do that?
        view.loadUrl(url);
        return false;
    } else {
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setData(Uri.parse(url));
        startActivity(intent);
        return true;
    }

Would the best way to determine whether there is a rel=external attribute/value be to somehow use addJavascriptInterface() and have JavaScript inform Java whether or not there is a rel attribute and what the value is?

Or is there a better way?

(I am looking for a solution that does not involve checking the domain of the URL because there are an arbitrary number of domains that need to be treated as internal and that I cannot know in advance or determine easily on-the-fly.)

Answer 1

I think a variation of your original suggestion is probably best if you don’t want to modify the existing URL.

Use addJavaScriptInterface to add a class to handle your external URL loading. An inner class might look like this:

public class JavaScriptInterface {
    public void viewExternalUrl(String url) {
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setData(Uri.parse(url));
        startActivity(intent);
        return true;
    }
}

And of course adding it:

webView.addJavascriptInterface(new JavaScriptInterface(), "Android");

Inject JavaScript to add click handlers to call your JavaScript interface after the page is loaded (using JQuery for simplicity’s sake) through loadUrl. You can detect the page load finishing by creating a custom WebViewClient and overriding onPageFinished.

webView.setWebViewClient(new WebViewClient() {
    private static final String sJs = "javascript:" +
        Uri.encode("$('a[@rel$='external']').click(function(){ Android.viewExternalUrl($(this).attr('href')); });");

    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl(sJs);
    }
}

I haven’t tested any of this code, but it should work, assuming you have JQuery loaded in the page. If not, you can probably come up with some JavaScript to manipulate the DOM without it or you can use loadUrl to manually load JQuery first before the loading the JavaScript.

Note that this approach completely abandons any use of shouldOverrideUrlLoading