Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
682 views
in Technique[技术] by (71.8m points)

cordova - PhoneGap: Open external link in default browser (outside the app)

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="hello@example.com">
    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
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...