iOS Navigation Controls (Back button)

  • 1
  • Question
  • Updated 5 years ago
  • Doesn't Need an Answer
This should be simple, but... How do I get 'Navigation' controls on iOS?

I am implementing a hybrid app that needs to run on iOS and Android. Android is fine, but iOS is not. I can't alter the actual web site(s), so this needs to work in the 'launcher' I create with pgBuild. Our web site works fine, but there are certain links there (third party licenses, other external sites), that obviously don't have any links back to my site. Since iOS does not have a 'back' button, this leaves our app trapped displaying that site. A few options would be
1) Add a Navigation Control to the inAppBrowser (or similar)
2) Launch any external site links in the default system browser. I've tried to do this using inAppBrowser and _system target, but no luck
3) Block these transfers (or present a popup that would allow them to be opened in the system browser)
Test platform I have is iOS 8.x, but ideally should work for 6+.

Any suggestions would be appreciated.
Photo of Tom Saul

Tom Saul

  • 5 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Your best option would be the inAppBrowser as _blank with forward/backward buttons.
Why does it "not work"? What happens instead?

(My guess is that you didn't configure your app properly, which results in the plugin not being invoked)
Photo of Tom Saul

Tom Saul

  • 5 Posts
  • 1 Reply Like
I have no control of the external sites to add buttons there. They are generally built assuming they will be viewed in a standard browser (with full navigation/menu) functionality, and when viewed in a WebView (or inAppBrowser) on iOS none of these are present. For example, our map includes a link to
http://www.openstreetmap.org/copyright

After you get to this page there is no way to get back.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That's because what you see is just the app's webview component, not the inAppBrowser window.
The odds are that your plugin is not invoked. This can be caused by:
- config.xml not found, read or parsed
- plugin misspelled in config
- missing or misplaced reference to phonegap.js
- incorrect window.open() call or missing default event cancellation
- window.open() called before phone gap.js loaded and/or deviceready fired.
Photo of Circlelights Co.

Circlelights Co.

  • 3 Posts
  • 0 Reply Likes
Tom,

How did you resolve this issue?

Thanks,
Jason
Photo of Tom Saul

Tom Saul

  • 5 Posts
  • 1 Reply Like
The previous comment was correct - my code was not properly loading the inAppBrowser in iOS. I don't see a way to attach files here, but here is a snippet of the code I ended up with that worked.

document.addEventListener("deviceready", function(){onDeviceReady();}, false);
function onDeviceReady()
{
if (device.platform == 'iOS')
{
openTarget = "_blank";
openOptions = "location=no,enableViewportScale=yes,closebuttoncaption=Home,toolbarposition=top";
}

if (device.platform == 'Android')
{
openTarget = "_blank";
openOptions = "location=no,toolbar=no";
//enabling zoom control
cordova.plugins.ZoomControl.ZoomControl("true");
// enabling built in zoom control
cordova.plugins.ZoomControl.setBuiltInZoomControls("true");
// enabling display zoom control
cordova.plugins.ZoomControl.setDisplayZoomControls("true");
}

var d = Math.floor(new Date() / 300000);
var target = 'http://mobileweb.goakamai.org?forceRe...=' + d;
iab = window.open(target, openTarget, openOptions);
iab.addEventListener('exit', exitIAB);
iab.addEventListener('loadstop', changeBackgroundColor);
}