Menu
I'm trying to open links in Safari (on an iPhone) from a PhoneGap application. I'm using PhoneGap version 3.1.0, and use PhoneGap Build, to build the application.
I have two links on the page (shown below in www/index.html). Both links open inside the PhoneGap application. I can see that PhoneGap is loaded correctly, because alert('device ready!'); is triggered.
What do I need to change, to open the links in the default browser (outside the app)?
The www/config.xml file looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
<name>AppName</name>
<description>description</description>
<author href="http://www.example.com/" email="[email protected]">
Company
</author>
<preference name="phonegap-version" value="3.1.0" />
<preference name="orientation" value="portrait" />
<preference name="stay-in-webview" value="false" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.3" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.2" />
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<access origin="*" />
</widget>
The www/index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Test application</title>
</head>
<body>
<a href="#" onclick="openUrl('http://www.google.com/'); return false;">Link test 1</a>
<a href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">Test link 2</a>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function openUrl(url) {
alert("open url: " + url);
window.open(url, '_blank', 'location=yes');
}
function onDeviceReady() {
alert('device ready!');
}
$(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</body>
</html>
Here's the project structure:
├── platforms
├── plugins
│ └── org.apache.cordova.inappbrowser
│ ├── LICENSE
│ ├── package.json
│ ├── plugin.xml
│ ├── README.md
│ ├── RELEASENOTES.md
│ ├── src
│ │ ├── android
│ │ │ ├── InAppBrowser.java
│ │ │ └── InAppChromeClient.java
│ │ ├── blackberry10
│ │ │ └── README.md
│ │ ├── ios
│ │ │ ├── CDVInAppBrowser.h
│ │ │ └── CDVInAppBrowser.m
│ │ └── wp
│ │ └── InAppBrowser.cs
│ └── www
│ ├── InAppBrowser.js
│ └── windows8
│ └── InAppBrowserProxy.js
├── README.md
└── www
├── config.xml
├── cordova.js
├── index.html
├── js
│ └── jquery-1.9.1.js
└── phonegap.js
570
This is how i solved in Cordova/Phonegap 3.6.3
Install the inappbroswer cordova plugin:
cordova plugin add org.apache.cordova.inappbrowser
I wanted to keep my phonegap app as similar as possible to a standard web page: I wanted that by having target="_blank" on a link, it would open in an external page.
This is how i implemented it:
$("a[target='_blank']").click(function(e){
e.preventDefault();
window.open($(e.currentTarget).attr('href'), '_system', '');
});
so all i have to do is use a link like the following
<a href="http://www.example.com" target="_blank">Link</a>
How about this?
<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>
EDIT:
This may pertain: How to call multiple JavaScript functions in onclick event?
I was thinking, how about this:
Add to code:
$(".navLink").on('tap', function (e) {
//Prevents Default Behavior
e.preventDefault();
// Calls Your Function with the URL from the custom data attribute
openUrl($(this).data('url'), '_system');
});
then:
<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>
You should use the gap:plugin tag and the fully qualified id in your config.xml to install plugins:
<gap:plugin name="org.apache.cordova.inappbrowser" />
As documented here.
9
I am using the cordova 6.0, here is my solution:
1: Install this cordova plugin.
cordova plugin add cordova-plugin-inappbrowser
2: add the open link in the html like following.
<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>
3: this is the most importaint step due to this I faced lots of issue:
download the cordova.js file and paste it in the www folder.
Then make a reference of this in the index.html file.
<script src="cordova.js"></script>
This solution will work for both the environment android and iPhone.
7
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
