Link handling

[wkethman]

Implementing the plugin as shown:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "http://wckethman.com/htree/my-app/www/index.html",
          withJavascript: true,
        )
      },
    );
  }
}
This works fine but when clicking on tel: links "net::ERR_UNKNOWN_URL_SCHEME" thrown

Any suggestions?

[shinriyo]

@wkethman You mean

You replaced from

routes: {
  "/": (_) => new WebviewScaffold(
  url: "http://wckethman.com/htree/my-app/www/index.html",
  withJavascript: true,
)

to

like this?

routes: {
  "/": (_) => new WebviewScaffold(
  tel: "000-000-000",
  withJavascript: true,
)

I guess it doesn't support tel:.

If you append feature for tel:, author may accept your pull-request.

https://github.com/dart-flitter/flutter_webview_plugin/blob/b41c311a9562f770df52d8a61b5ea96c0a1a41b8/ios/Classes/FlutterWebviewPlugin.m#L99

[lejard-h]

Not supported yet.

Have not done that yet, but we should probably be able to catch that kind of call from the webview and call url_launcher

[alexmdavis]

The url_launcher approach works for me, except the Android webview also renders the ERR_UNKNOWN_URL_SCHEME error. I'd also need to interrupt loading; something like #14.

[sameerbakre]

do we have any way to handle error page on android yet? I can redirect to previous url after error. However it still shows the error which is not a good user experience.

[chintooflutter]

is this issue resolved or pending? i am facing the same problem.

Also not working when I click to whatsapp share button. It is opening in google play store.

[mohdkhmais]

having the same issue when clicking on tel link, any solutions so far ?

[grungebuddy]

having the same issue when clicking on tel link, any solutions so far ?

Here is a solution to disable navigation for tel and mailto for now:

https://stackoverflow.com/questions/56421218/how-to-allow-mailto-and-tel-url-schemes-in-webview-flutter

[wooldridgetm]

meh, just listen to the onUrlChanged stream to detect when the url is changing & has mail/tel/http(s). If so, then invoke goBack() on the WebViewPlugin instance & then use url_launcher to open the link. something like this...

_subscription = webViewPlugin.onUrlChanged.listen((String url) async {
      print("navigating to...$url");
      if (url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("https"))
      {
        await webViewPlugin.stopLoading();
        await webViewPlugin.goBack();
        if (await canLaunch(url))
        {
           await launch(url);
           return;
        }
        print("couldn't launch $url");
      }
    });

[TimothySealy]

I've used a slightly different approach. For my use case I only needed to override the telephone links. I've used the invalidUrlRegex parameter of the WebviewScaffold to suppress navigation to tel: links:

WebviewScaffold(
   url: url,
   invalidUrlRegex: '^tel:',
);

I've used url_launcher to actually load the tel: links. In order to do so I listen to the state changed (onUrlChanged will not work because the navigation is suppressed for tel: links):

StreamSubscription<WebViewStateChanged> _onStateChanged;
_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) async {
  if (mounted) {
    if (state.url.startsWith('tel:') && state.type == WebViewState.abortLoad) {
      if (await canLaunch(state.url)) {
        await launch(state.url);
      }
    }
  }
});

Note that the state.type == WebViewState.abortLoad is not really required and you could combine the inner two if statements for brevity.

Also the tel: links load fine on iOS (also after this implementation), this is basically a work around for Android.