If you want to link to an external site and make it easy for the user to return to your PhoneGap app, try the well-named inAppBrowser (IAB for short). Here are the simple steps to implement it into an already-working PhoneGap project for iOS and Android.
You’ll need to style your external links with JavaScript. Instead of …
<a href="http://bit.ly/iphonedevlog">Click here</a>
use …
<a href="#" ontouchend="window.open('http://bit.ly/iphonedevlog','_blank','location=yes','closebuttoncaption=Return');">Click Here</a>
or as a button …
<input type="button" id="button1" onclick="window.open('http://bit.ly/iphonedevlog','_blank','location=yes','closebuttoncaption=Return');" value="Click Here">
Options (these work in Android and iOS):
_blank: Opens in the IAB. This is used in the example above. Replace _blank with any of the following if necessary:
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_system: Opens in the system’s web browser.
location=yes: This is used in the example above. It displays the full URL of the page in the inAppBrowser in a location bar. This is the default IAB behavior, so if you leave the option out, IAB will show the location bar. Replace yes with no to refrain from displaying the location bar: location=no
Captioning the Done button:
The default return button in the IAB is to display the word “Done” in the button. I changed it to Return in the example above. I notice that when I used this option in the first of my links, all the following links on the page (which omitted this option) adopted the same wording as the first link. You can change it to another word by adding your own text after the equal sign: closebuttoncaption=
There are many more options for the IAB, especially for iOS. See one of the resource links at top.
1. Download the plugin. In your project’s folder in Terminal, type the add command::
cordova plugin add cordova-plugin-inappbrowser --save
2. Above all of your other js scripts between your <head> tags, put:
< script src="cordova.js"></script> < script type="text/javascript" charset="utf-8"> function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } // cordova is ready // function onDeviceReady() { } </script>
(My WordPress site is no longer displaying scripts when the angled brackets are closed, so I put a space after the first angled bracket like this: < script> so the whole script would display.)
3. Change your <body> to execute the script to …
<body onLoad="onLoad()">
4. Create the file and test on your device.
If I open my PG 2.7.0 (Android) HTML page in FF or Google, and click on a link formatted like this:
I get a 2-line dialog like this, with the second line in a form field:
[“http://www.teamassociated.com/cars_and_trucks/RC10B4.2/RSRTR/manuals
_setups/”,”_blank”,null]
gap:[“InAppBrowser”,”open”,”InAppBrowser550906394″]
OK button, Cancel button
Clicking on either button stops the action and the link is not followed through.
Answer:
Attempting to run cordova.js in a browser is pointless. cordova.js _needs_ to run in a cordova-compliant shell such as cordova-android, cordova-ios, etc.PG will not open external links in web browser on desktop during testing.
Ahoy there! Great info!
One question though. I’m created a side panel through jQM (The sliding thing). Is it possible that whenever links are opened, the app’s menus still be accessible? Somehow, simply “embedding” the inappbrowser instead of launching a full screen one?
No, not possible to my knowledge.
You saved my end of year project… Been searching for this for ever. Thank you!
Steve, I am stuck!
I have gotten a simple iOS app on to Testflight. The app goes to my wordpress page but I am having a hard time figuring out how to get links to open in the inapp viewer.
The biggest hurdle is getting all of my external links to read like this or anytime someone clicks an external link they are stuck on the external page:
Click Here
I cant find a plugin to automatically do this. Any suggestions.
The click here in my last comment is really all external links to have: onclick=”window.open(‘http://bit.ly/iphonedevlog’,’_blank’,’location=yes’,’closebuttoncaption=Return’);
i have a doubt..
how to get the current page data and reponse by using window.open()?
I don’t understand your question. Post your question here: https://groups.google.com/forum/#!forum/phonegap Include your operating system (PC, Mac), whether you’re using PhoneGap, PhoneGap Build, or Cordova, devices building for (iOS, Android), and explain in detail what you want your app to do. There’s not enough information in your question for me to answer it.
Pingback: Using Cordova CLI on Mac OS X Mavericks to build iOS apps (8/2015) | iPhone Dev Log
Pingback: Using Cordova 5.0 CLI on Mac OS X Mavericks to build Android apps | iPhone Dev Log
This https://github.com/domaemon/org.apache.cordova.plugin.tts is not working. Please help me in running this. I am blank what to do!!
I can’t help you. I am not familiar with that plugin. Also, next time you want help online, you need to give your environment and what exactly you are trying to do. No one could help you with the little amount of information you have given here.