1

I am working on a simple app written in Nativescript.

The app has a login form that authenticates against an API, and on success loads a webview. So not that complicated.

But I would like to be able to open certain links in the default browser on the phone, and not in webview, like links to external sites.

Is it possible to "capture" all link clicks, and if the link has the target attribute set to blank, we make the link open in a external browser?

I need a solution that works both on iOS and Android.

Is this possible to do in Nativescript?

Improve this question

3 Answers 3

Reset to default
4

You can import this

import * as utils from "@nativescript/core/utils";

and then do

utils.openUrl("https://www.youtube.com/");

whenever you want to open a link (in this case youtube) in a default browser.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Yes, it's possible to do that in NativeScript but not with the default WebView component. I was exactly in this situation, what I did is writing a plugin that customizes default WebView in NativeScript to override the default WKUIDelegate in iOS webview & idem for Android. For iOS, the WKUIDelegate allow to detect if any attempt to open link with target _blank with method webViewCreateWebViewWithConfigurationForNavigationActionWindowFeatures, hence, when implementing your custom webview with this delegate allow to open link in external browser / application as you wish.

Take a look at this plugin: https://github.com/Notalib/nativescript-webview-ext to have an idea how to customize default webview.

Improve this answer

7 Comments

Thank you for the information. After some reading and testing (I have just started using Nativescript and Typescript, only worked with PHP and Javascript before) I got the webview running. Could you perhaps elaborate on how I can detect the target attribute for the link? Also: in my first test app I used the nativescript-webview-utils to set headers for the webview, so I could send the token recieved from the API. Is it possible to set headers with ext / set cookies / use utils together with ext?
Basically, what I've done is creating my own plugin that replace the default WebView component of NativeScript that implements 2 delegate WKNavigationDelegate & WKUIDelegate. With the WKNavigationDelegate, you can catch any request in WebView & append extra headers/cookies using the method webViewDecidePolicyForNavigationActionDecisionHandler. Check this plugin: github.com/EddyVerbruggen/nativescript-webview-utils. So I create my own plugin WebView that is a combination of nativescript-webview-utils && nativescript-webview-ext
To detect the target attribute of the link, if you override the WKUIDelegate for iOS WKWebview, you can implement the method webViewCreateWebViewWithConfigurationForNavigationActionWindowFeatures(webView: WKWebView, configuration: WKWebViewConfiguration, navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures). This method is invoked if there is an attempt to open a link inside WebView with target _blank, then you can extract the link attribute using navigationAction that contains the request URL, e.g. navigationAction.request.URL.absoluteString
I`m not sure I understand this, so please bear with me :) 1) Do I only need the webview-utils plugin to achieve this? 2) Do I use the webViewCreateWebViewWithConfigurationForNavigationActionWindowFeatures method instead of shouldOverrideUrlLoading from webview-ext? 3) This method is for iOS only, and is there an equivalent for Android? This project could be above my level of competence, but if I could this to work it will solve a big issue for me!
3) I haven't tested on android yet, but in android, you can use shouldOverrideUrlLoading to capture any request issued by your webview.
|
2

You may use the nativescript-webview-ext plugin and use the shouldOverrideUrlLoading event to check the URL and cancel the process as needed then use the open url method in utility module to open the given url in default browser.

Improve this answer

2 Comments

This can be done with the default webview: github.com/NativeScript/NativeScript/issues/… Not sure how to do it on target=_blank, though
I would consider using stopLoading() as a workaround, it's not completely preventing the load request but stopping it after starting to load. nativescript-webview-ext implements the right native apis to handle this scenario, which is why I recommend the plugin over default web view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.