I have an app in which I have a inappbrowser where I display some websites. It works, clicking a link in the webpage goes to the next page in the website inside my app. But when I click the phone's back button, it takes me straight into my app. I want to go back to the previous page in the website instead. How can I do this??
I want using javascript only. Not editing java. Can anyone help me, please?
I want using javascript only. Not editing java. Can anyone help me, please?
- 11 Posts
- 0 Reply Likes
Posted 6 years ago
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Are you sure that what you see is actually the inAppBrowser window and not the plain webview?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Wouldn't you rather use the system browser to show external websites? Many advantages:
- it's obvious to the user that he left the app
- all advanced browser functionalities are available (like Favorites, etc.)
- all device functions work
- user can switch between browser and app at any time and have them both available.
If you still want to use "_blank" instead of "_system", you should make the "location=yes", so a "done" button (or "X" button in Android) appears. That is the proper way for the user to return to the app.
- it's obvious to the user that he left the app
- all advanced browser functionalities are available (like Favorites, etc.)
- all device functions work
- user can switch between browser and app at any time and have them both available.
If you still want to use "_blank" instead of "_system", you should make the "location=yes", so a "done" button (or "X" button in Android) appears. That is the proper way for the user to return to the app.
- 11 Posts
- 0 Reply Likes
No, I do not mean like that. You can see in this picture. I hope you understand my question after seeing this picture. Sorry if my english is bad.


- 11 Posts
- 0 Reply Likes
I need when user hit hardware BACK BUTTON the inappbrowser backs the history NOT close the window.
How can I do that?
How can I do that?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hi Aahedi!
Now, for the bad news: I have never seen a PGB solution for your requirement. Although it is possible to inject code to the web page within the inappbrowser, I don't see an easy way to inject script to catch the backbutton event in each consecutive web page.
The only feasible solution appears to be building locally (not with PGB) and tweak the inAppBrowser code, first. Here is how:
http://stackoverflow.com/questions/20...
http://stackoverflow.com/questions/16...
It would be very nice if someone could fork the inAppBrowser plugin and introduce an option string for the third window.open()-parameter, which would indicate the "go back mode" of the Android hardware button: either "back one web page in the inappbrowser history" or "back to app".
Sorry if my english is bad.Oh, it's good enough by all means, and you made your question perfectly clear. The image helped, too. Good job!
Now, for the bad news: I have never seen a PGB solution for your requirement. Although it is possible to inject code to the web page within the inappbrowser, I don't see an easy way to inject script to catch the backbutton event in each consecutive web page.
The only feasible solution appears to be building locally (not with PGB) and tweak the inAppBrowser code, first. Here is how:
http://stackoverflow.com/questions/20...
http://stackoverflow.com/questions/16...
It would be very nice if someone could fork the inAppBrowser plugin and introduce an option string for the third window.open()-parameter, which would indicate the "go back mode" of the Android hardware button: either "back one web page in the inappbrowser history" or "back to app".
- 11 Posts
- 0 Reply Likes
Hi Petra, thank you for your reply. Currently I'm looking for a way to use javascript only. I don't have the java language skills. I'm just using Html5, CSS, and Javascript. Hopefully one day there is a way how to do it only with javascript only.
- 17 Posts
- 0 Reply Likes
I need exactly the same—a way to prevent the back button from closing the browser and performing like a back button does with history.
Are there any known workarounds until this may be merged into the plugin?
Are there any known workarounds until this may be merged into the plugin?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Certainly. The inappbrowser plugin was extended last year to allow for exactly this functionality.
Read the plugin's documentation, especially the 'options' section.
btw: this option is now the default, so it should 'work' correctly out of the box. Of course, you must make sure to use the inappbrowser from npm, not the old version from the PGB repo.
Read the plugin's documentation, especially the 'options' section.
btw: this option is now the default, so it should 'work' correctly out of the box. Of course, you must make sure to use the inappbrowser from npm, not the old version from the PGB repo.
- 8 Posts
- 0 Reply Likes
And what if it doesn't? I open pages in target='_blank', everything works, I manage to execute comprehensive JS with executeScript (that's why I use _blank), but Android back button doesn't work as it should, it just closes inAppBrowser instead:
function onDeviceReady() {
iabRef = window.open('example.com', '_blank', 'location=no', 'hardwareback=yes');
iabRef.addEventListener('exit', iabClose);
}
I navigate through several pages, try to press back and see just a white screen instead. Any known issues here? Or probably I am doing smh completely wrong? Thanks!
function onDeviceReady() {
iabRef = window.open('example.com', '_blank', 'location=no', 'hardwareback=yes');
iabRef.addEventListener('exit', iabClose);
}
I navigate through several pages, try to press back and see just a white screen instead. Any known issues here? Or probably I am doing smh completely wrong? Thanks!
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
iabRef = window.open(...)Are you sure you are getting the inappbrowser window at all (and not a new instance of webview or the system browser)?
'location=no', 'hardwareback=yes');And this is not correct, either
- 8 Posts
- 0 Reply Likes
Oh, I was that illiterate. Excuse me please, probably some copy-paste from stackoverflow is not always a good idea.
But nevertheless, I still don't understand something simple. So I took an example from phonegap documentation and it didn't work. Here, a super lightweigh standalone file:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
}
And it doesn't fire the page. I also plug in cordova.js right before this script. I would highly appreciate if you point me on my newbie, I believe, mistake.
Thanks!
But nevertheless, I still don't understand something simple. So I took an example from phonegap documentation and it didn't work. Here, a super lightweigh standalone file:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
}
And it doesn't fire the page. I also plug in cordova.js right before this script. I would highly appreciate if you point me on my newbie, I believe, mistake.
Thanks!
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Your current newbie mistake is to not read and apply what's written under "some HTML allowed" at this forum.
Here, code in tags will not be displayed, unless you wrap them in an html CODE element.
Here, code in tags will not be displayed, unless you wrap them in an html CODE element.
- 8 Posts
- 0 Reply Likes
The rest were just html tags, basically, so I decided to remove them. Anyways:
Thanks for your patience :P
<!DOCTYPE html>
<html>
<head>
<title>Standalone Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
}
</script>
</head>
<body>
</body>
</html>
Thanks for your patience :P
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
The main question is: is your plugin activated at all? Yes, you have cordova.js and yes, you are waiting for deviceready. But is the inappbrowser plugin "installed"?
Could you please:
- confirm that you have the latest version of the inappbrowser plugin from npm in your config
- confirm that both index.html and config.xml are in the ROOT directory ("/") of your zip file
- confirm that the inappbrowser plugin is listed in the plugin overview of your app's PGB page.
Could you please:
- confirm that you have the latest version of the inappbrowser plugin from npm in your config
- confirm that both index.html and config.xml are in the ROOT directory ("/") of your zip file
- confirm that the inappbrowser plugin is listed in the plugin overview of your app's PGB page.
- 8 Posts
- 0 Reply Likes
I think so.
1. Here is the line from config.xml:
2. index.html and config.xml are in the same root directory.
3. And here is a string from app's PGB page:
org.apache.cordova.inappbrowser pgb 0.6.0 0.6.0 0.6.0 android,ios,winphone
1. Here is the line from config.xml:
<gap:plugin name="org.apache.cordova.inappbrowser" />
2. index.html and config.xml are in the same root directory.
3. And here is a string from app's PGB page:
org.apache.cordova.inappbrowser pgb 0.6.0 0.6.0 0.6.0 android,ios,winphone
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
1. Well, that's the old one from the deprecated pgb repo. You can't use that one anymore.
Update your plugin by specifying the latest versions from npm. Be aware that they are all named differently!
2. "The same root directory" doesn't sound like THE ROOT DIRECTORY ("/") to me.
Update your plugin by specifying the latest versions from npm. Be aware that they are all named differently!
2. "The same root directory" doesn't sound like THE ROOT DIRECTORY ("/") to me.
- 8 Posts
- 0 Reply Likes
Hm, it's weird that phonegap plugs in a plugin from a deprecated repo by default. Ok, I will specify with the newest version. And yeah, files are in the root directory, no worries, I do understand what it means.
It seems like this is the last obstacle to finish my small project. Let me try now.
It seems like this is the last obstacle to finish my small project. Let me try now.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hm, it's weird that phonegap plugs in a plugin from a deprecated repo by default.It doesn't. In fact, when using Phonegap Build, no plugin is default.
However, if you are using an installed version of Phonegap or the Desktop App, you're on your own. Those things are not intended to be used with PGB.
- 8 Posts
- 0 Reply Likes
Ok, got it. Btw everything works. Thank you so much for your time and patience! I really do appreciate it, you helped me a lot.
I have one last question which would be nice to resolve, but it is not crucial. What I do is a news reader app. I have an html page on my domain which provides a set of links to different news aggregated on the server side. It is the start page of the app also.
So app opens some random pages from the internet. But with a bottom bar I can control my app with when on a news article page. (basically just a 100% width and 50 px height div).
At the moment I inject this part with executeScript() on 'loadstop' and it works fine. However some pages load for too long, therefore my bar appears really late sometimes.
I tried 'loadstart', but this functions seems to be for showing preloaders or this kind of thing. Can you recommend me any direction to look into the way of executing a script before a page is fully loaded but right after DOM started to be built?
Thanks again!
I have one last question which would be nice to resolve, but it is not crucial. What I do is a news reader app. I have an html page on my domain which provides a set of links to different news aggregated on the server side. It is the start page of the app also.
So app opens some random pages from the internet. But with a bottom bar I can control my app with when on a news article page. (basically just a 100% width and 50 px height div).
At the moment I inject this part with executeScript() on 'loadstop' and it works fine. However some pages load for too long, therefore my bar appears really late sometimes.
I tried 'loadstart', but this functions seems to be for showing preloaders or this kind of thing. Can you recommend me any direction to look into the way of executing a script before a page is fully loaded but right after DOM started to be built?
Thanks again!
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
You may be looking for the DOMContentLoaded event:
https://developer.mozilla.org/en-US/d...
It fires when DOM is loaded, but before any scripts that manipulate the DOM are executed.
https://developer.mozilla.org/en-US/d...
It fires when DOM is loaded, but before any scripts that manipulate the DOM are executed.
- 8 Posts
- 0 Reply Likes
- 8 Posts
- 0 Reply Likes
Petra, if you are around, I would highly appreciate if you can qualify one particular thing regarding DOMContentLoaded question. And I will stop bothering you, I promise.
The question is how and where to assign this particular event listener? I tried to add it to document in onDeviceReady, to iabRef itself (which didn't work, no surprise since it is not an IAB parameter), tried to reach the document inside iabRef and some other, even more stupid things.
So basically what I am looking for is:
And desired experience is to see the script being executed after DOM content is loaded. But it doesn't work, obviously.
Thank you in advance and sorry for being so annoying. In my defence I can say that I spent whole night with this before turning back to you again, so I am a parasite but not a shameless one (:
The question is how and where to assign this particular event listener? I tried to add it to document in onDeviceReady, to iabRef itself (which didn't work, no surprise since it is not an IAB parameter), tried to reach the document inside iabRef and some other, even more stupid things.
So basically what I am looking for is:
function onDeviceReady() {
iabRef = cordova.InAppBrowser.open('http://example.com', '_blank', 'location=no,zoom=no');
iabRef.addEventListener('DOMContentLoaded', doSomething);
}
function doSomething() {
iabRef.executeScript({
file: "http://myserver.com/js/example.js"
});
}
And desired experience is to see the script being executed after DOM content is loaded. But it doesn't work, obviously.
Thank you in advance and sorry for being so annoying. In my defence I can say that I spent whole night with this before turning back to you again, so I am a parasite but not a shameless one (:
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Firstly, if I didn't want to be bothered, I wouldn't hang around here frequently. So, don't worry. I'm happy to try and help if I can.
OTOH, I never tried to do something you are attempting, either. So I can't tell from experience.
Your 'iabRef' object can only handle the four events as mentioned in the iab docs (loadstart, loadend, loaderror and loadexit), so that will not be the proper way to listen to the DOMContentLoaded event within the website that is shown in the inAppBrowser window. The DOMContentLoaded event is something that is fired internally within that website's document.
This means that the event needs to be passed to the calling app.
As outlined earlier in this thread, that could only be achieved by creating an iteration (loop) which checks for a value in a memory space that can be accessed by both your app and the external site within the iab; that would be localStorage.
The website would set a variable to true when DOMloaded. This would be noticed by your app, which then injects the javascript.
My idea would be this approach:
In your app:
- set localStorage['DOMloaded'] to false
- open the external site in iab
- upon 'loadstart', inject a couple of lines of script into the external website's document, that:
a- adds an eventListener for DOMContentLoaded
b- in the callback, sets localStorage['DOMloaded'] to true
(Perhaps this step can already be pre-coded in the external website)
- start a loop which listens to localStorage['DOMloaded'] becoming true
- upon true, inject the script code as you described above under doSomething()
OTOH, I never tried to do something you are attempting, either. So I can't tell from experience.
Your 'iabRef' object can only handle the four events as mentioned in the iab docs (loadstart, loadend, loaderror and loadexit), so that will not be the proper way to listen to the DOMContentLoaded event within the website that is shown in the inAppBrowser window. The DOMContentLoaded event is something that is fired internally within that website's document.
This means that the event needs to be passed to the calling app.
As outlined earlier in this thread, that could only be achieved by creating an iteration (loop) which checks for a value in a memory space that can be accessed by both your app and the external site within the iab; that would be localStorage.
The website would set a variable to true when DOMloaded. This would be noticed by your app, which then injects the javascript.
My idea would be this approach:
In your app:
- set localStorage['DOMloaded'] to false
- open the external site in iab
- upon 'loadstart', inject a couple of lines of script into the external website's document, that:
a- adds an eventListener for DOMContentLoaded
b- in the callback, sets localStorage['DOMloaded'] to true
(Perhaps this step can already be pre-coded in the external website)
- start a loop which listens to localStorage['DOMloaded'] becoming true
- upon true, inject the script code as you described above under doSomething()
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers
-
Plugins
- 1283 Conversations
- 38 Followers





Aahedi
This my sample code:
var inAppBrowserbRef;
inAppBrowserbRef = window.open('http://phonegap.com', '_blank', 'location=no,toolbar=no');
inAppBrowserbRef.addEventListener('loadstart', inAppBrowserbLoadStart);
inAppBrowserbRef.addEventListener('loadstop', inAppBrowserbLoadStop);
inAppBrowserbRef.addEventListener('loaderror', inAppBrowserbLoadError);
inAppBrowserbRef.addEventListener('exit', inAppBrowserbClose);
function inAppBrowserbLoadStart(event) {
navigator.notification.activityStart("Please Wait", "Its loading....");
alert(event.type + ' - ' + event.url);
}
function inAppBrowserbLoadStop(event) {
navigator.notification.activityStop();
alert(event.type + ' - ' + event.url);
}
function inAppBrowserbLoadError(event) {
navigator.notification.activityStop();
alert(event.type + ' - ' + event.message);
}
function inAppBrowserbClose(event) {
//navigator.notification.activityStop();
alert(event.type);
inAppBrowserbRef.removeEventListener('loadstart', iabLoadStart);
inAppBrowserbRef.removeEventListener('loadstop', iabLoadStop);
inAppBrowserbRef.removeEventListener('loaderror', iabLoadError);
inAppBrowserbRef.removeEventListener('exit', iabClose);
}