I have some HTML coming in from my database to my Ionic app, however when someone clicks a predefined link in this HTML it takes over the fullscreen window of the app and there is no way to get back to the app with force quitting it. How can I trap these navigation events without needing to parse the HTML and add directives to it each time I load in this HTML?
Edit to include sample code:
p.item-body(ng-bind-html="item.body")
item.body
contains <a>
tags. I want to prevent these <a>
tags from navigating away from my app in the root web view.
I don't intend to use it to block navigation.. I simply need to trap the anchors to open them in a $cordovaInAppBrowser instead of in the UIWebView my app is hosted in.
I would definitely recommend against it because it's bad UX, but here's how you can do it:
function preventNavigation() {
var allAnchors = document.getElementsByTagName('a');
function prevDefault(evt) {
evt.preventDefault();
}
for(var i = 0; i < allAnchors.length; i++) {
allAnchors[i].onclick = prevDefault;
}
}
I ended up following the directions here: https://blog.nraboy.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/
It's exactly what i was looking for, but yvesmancera's answer was also helpful.