Ionic 2|3 : Open all links inside inAppBrowser


#1

Is there a way to open all links using the InAppBrowser from '@ionic-native/in-app-browser'. (https://ionicframework.com/docs/native/in-app-browser/)

Mayby by changing the function window.open ?

I have something like this :

<a href="https://www.google.com">Link</a>
And i want to open the InAppBrowser when the user click on the link.

Thank you.


#2

why would you like to use links???


#3

That’s something i can’t change, because the template is downloaded from an external web service.


#4

In that case you can refer to the following link:
https://forum.ionicframework.com/t/opening-all-links-in-in-app-browser/104578


#5

I’ve this :

window.open = (url, target?, opts?) => {
            this.openLink(url);
            return null;
         }

openLink(urlOpening: string) {
  this.browser = this.iab.create(urlOpening, '_blank', 'location=yes,clearsessioncache=yes,clearcache=yes');   
}

it works fine on : <p onclick="window.open('https://www.google.com')">link test</p>

But it doesn’t work on href .

Do you have an idea ?


#6

try this:

 <a href="#" onclick="window.open('https://www.google.com', '_system', 'location=yes'); return false;">
                Open Google
            </a>

#7

Just for future reference since this forum seems to dead:

Insert this catch-all script in your app’s index.html:

    <script type="text/javascript">
        // links catch-all/handler
        document.onclick = function (e) {
            e = e ||  window.event;
            var element = e.target || e.srcElement;
            // making sure there's an URL
            if ((element.tagName == 'A') && (element.href)) {
              // opening in a new window
                window.open(element.href, "_blank", "location=yes");
                return false;
            }
        };
    </script>

Then override the window.open function. That way every links will get handled properly.