Pedro
Reputation: 113
Why external links do not work on phonegap app after build
I have a simple PhoneGap, it consist of a couple of link images that go to external links. The app works perfectly in the PhoneGap emulation but after i build the app on the phonegap website and install it to my phone the links do not work. Any help in finding out why would be appreciated. Below is the code.
This is my index file.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" charset="utf-8">
function openURL(urlString){
myURL = encodeURI(urlString);
window.open(myURL, '_self');
}
</script>
<title>Chec App</title>
</head>
<body class="">
<header>
<div class="container">
<div class="row">
<div class="col-md-12 logo-wrapper">
<a id="logo" href="http://checanada.ca">
<img src="img/logo.png" />
</a>
</div>
</div>
</div>
</header>
<div id="home" class="container">
<div id="main" class="row">
<div class="col-md-12 " id="buttons">
<a href="http://www.checanada.ca" onclick="window.open('http://www.checanada.ca', '_self', 'location=no');"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/chec-future.jpg"></a>
<a href="http://www.checonline.ca" onclick="window.open('http://www.checonline.ca', '_self', 'location=no');"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/chec-online.jpg"></a>
<a href="http://www.checusout.ca" onclick="window.open('http://www.checusout.ca', '_self', 'location=no');"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/chec-us-out.jpg"></a>
</div>
</div>
</div>
<footer>
<div class="container" id="footer-wrapper">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6" id="blueprint">
<a href="http://blueprintagencies.ca" onclick="window.open('http://blueprintagencies.ca', '_self', 'location=no');">
<img src="img/blueprint.png" id="blueprint-logo" /></a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6" id="home-button">
<a href="http://www.checanada.ca" onclick="window.open('http://www.checanada.ca', '_self', 'location=no');">
<img src="img/home-button.png" id="home-button" /></a>
</div>
</div>
</div>
</footer>
</body>
</html>
This the config.xml
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.chec.mobile.app" version="1.0.0">
<name>CHEC App</name>
<description>Simple app</description>
<author href="http://devisteam.com" email="dev@devisteam">devisteam</author>
<content src="index.html"/>
<preference name="permissions" value="none"/>
<preference name="orientation" value="default"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
<preference name="webviewbounce" value="true"/>
<preference name="prerendered-icon" value="true"/>
<preference name="stay-in-webview" value="false"/>
<preference name="ios-statusbarstyle" value="black-opaque"/>
<preference name="detect-data-types" value="true"/>
<preference name="exit-on-suspend" value="false"/>
<preference name="show-splash-screen-spinner" value="true"/>
<preference name="auto-hide-splash-screen" value="true"/>
<preference name="disable-cursor" value="false"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="android-installLocation" value="auto"/>
<gap:plugin name="org.apache.cordova.battery-status"/>
<gap:plugin name="org.apache.cordova.camera"/>
<gap:plugin name="org.apache.cordova.media-capture"/>
<gap:plugin name="org.apache.cordova.console"/>
<gap:plugin name="org.apache.cordova.contacts"/>
<gap:plugin name="org.apache.cordova.device"/>
<gap:plugin name="org.apache.cordova.device-motion"/>
<gap:plugin name="org.apache.cordova.device-orientation"/>
<gap:plugin name="org.apache.cordova.dialogs"/>
<gap:plugin name="org.apache.cordova.file"/>
<gap:plugin name="org.apache.cordova.file-transfer"/>
<gap:plugin name="org.apache.cordova.geolocation"/>
<gap:plugin name="org.apache.cordova.globalization"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.media"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<gap:plugin name="org.apache.cordova.splashscreen"/>
<gap:plugin name="org.apache.cordova.vibration"/>
<icon src="icon.png"/>
<icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>
<icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>
<icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>
<icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
<icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
<icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
<icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
<icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>
<icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
<icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>
<gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
<gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
<gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
<gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
<gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
<gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
<gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
<gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
<access origin="*"/>
<plugin name="cordova-plugin-whitelist" version="1"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
</widget>
Upvotes: 2
Views: 7155
Answers (2)
Simon Prickett
Reputation: 4148
I changed your code around a bit to make it more in line with PhoneGap patterns - waiting until after the deviceready event, adding a Content Security Policy meta tag - I added a pretty open one, you might want to read up on this here and lock it down to what you need.
I also added a JS function that will find all elements with a given class name (I used "external-link") and modify them to work with the In App Browser. I wasn't sure what your app images looked like so I threw a place holder in there too. Your prior code was also loading the website into both the PhoneGap webview and the In App Browser, I fixed this by preventing the default event handler in my link click function.
There's a complete working example for PhoneGap build that's based on your project here.
Here's the index.html that is working nicely:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Chec App</title>
</head>
<body class="">
<header>
<div class="container">
<div class="row">
<div class="col-md-12 logo-wrapper">
<a id="logo" href="http://checanada.ca" class="external-link">
<img src="img/placeholder.png" />
</a>
</div>
</div>
</div>
</header>
<div id="home" class="container">
<div id="main" class="row">
<div class="col-md-12 " id="buttons">
<a href="http://www.checanada.ca" class="external-link"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/placeholder.png"></a>
<a href="http://www.checonline.ca" class="external-link"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/placeholder.png"></a>
<a href="http://www.checusout.ca" class="external-link"><img style="display: block; margin-left: auto; margin-right: auto;" src="img/placeholder.png"></a>
</div>
</div>
</div>
<footer>
<div class="container" id="footer-wrapper">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6" id="blueprint">
<a href="http://blueprintagencies.ca" class="external-link">
<img src="img/placeholder.png" id="blueprint-logo" /></a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6" id="home-button">
<a href="http://www.checanada.ca" class="external-link">
<img src="img/placeholder.png" id="home-button" /></a>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And here's the js/index.js:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.amendLinks('external-link');
},
// Find everything with class className and open it
// with the InAppBrowser
amendLinks: function(className) {
var n = 0,
links = document.getElementsByClassName(className);
for (; n < links.length; n++) {
links[n].onclick = function(e) {
e.preventDefault();
window.open(''.concat(this.href), '_blank');
}
}
}
};
app.initialize();
Upvotes: 1
Víctor
Reputation: 3039
Are you using cordova 5+? In that case you have to use whitelist plugin to allow external domains
Upvotes: 3
Related Questions
- Phonegap external links have stopped working in testflight only
- PhoneGap for iPhone: problem loading external URL
- phonegap and cordova not opening link in app browser
- External links in phonegap app do not open well
- "href" links in JavaScript Android not working
- Phonegap 2.9.0 doesn't open external links in default browser
- External links or url doesn't work on phonegap
- Phonegap 2.0 , Cordova external links
- Phonegap external links doesnt work
- Error when trying to use external link in Phonegap on iPhone