I am developing the application of Android and iOS by using Cordova.
Page structure is as follows.
- Page A (w/o iframe)
- Page B (w/ iframe)
Transitions
1. Page A --> Page B (forward)
2. Page A <-- Page B (backward by history.back())
iframe displays external web page.
When it goes back to Page A(w/o iframe) from Page B(w/ iframe), i have to call hisotory.back() twice.
However, Android app build by same javascript source only has to call history.back() once.
In addition, a similar problem does not occur when native WebVIew(UIWebView) of iOS is used.
Is this a Cordova(iOS) spec or bug?
Did anyone experience this issue?
Versions
Cordova 4.2 (iOS Platform 3.8.0)
iOS 8.3
Thanks.
First, iframes in iOS share their history.
Second, Cordova in iOS uses iframe as a JsToNativeBridge.
Therefore, in your application, there are two iframes.
The one is used for showing your Page.
the other is used for JsToNativeBridge. (This iframe is hidden)
The function of history.back conflicts these two iframes.
One solution is following.
After the deviceready event, before any plugin does work, execute that
var exec = cordova.require('cordova/exec');
exec.setJsToNativeBridgeMode(exec.jsToNativeModes.XHR_OPTIONAL_PAYLOAD);
Remark some plugins use addEventlistener for deviceready event. If you use such
plugin, please try the next solution.
The other solution is modifying the cordova.js in iOS.
Before:
if (bridgeMode === undefined) {
bridgeMode = jsToNativeModes.IFRAME_NAV;
}
After:
if (bridgeMode === undefined) {
bridgeMode = jsToNativeModes.XHR_NO_PAYLOAD;
// bridgeMode = jsToNativeModes.IFRAME_NAV;
}
I had the same issue, the solution that worked for me is a simple trick. Replace the :
<a data-rel="back" data-icon="back">back</a>
by
<a data-id="persistent" href="the page_before" data-transition="slide" data-icon="back"> back</a>
It worked fine
