web-dev-qa-db-ja.com

PhoneGap：デフォルトのブラウザーで外部リンクを開きます（アプリの外部）

PhoneGapアプリケーションから（iPhone上の）Safariでリンクを開こうとしています。 PhoneGapバージョン3.1.0を使用し、 PhoneGap Build を使用してアプリケーションをビルドします。

このページには2つのリンクがあります（www/index.htmlを参照）。 PhoneGapアプリケーション内で両方のリンクが開きます。 alert（ 'device ready！'）;がトリガーされるため、PhoneGapが正しくロードされていることがわかります。

デフォルトのブラウザ（アプリ外）でリンクを開くには、何を変更する必要がありますか？

www/config.xmlファイルは次のようになります。

<?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>

www/index.htmlファイルは次のようになります。

<!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>

プロジェクトの構造は次のとおりです。

├── 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
cordovaphonegap-pluginsphonegap-buildinappbrowser
26
Martin

これは私がCordova/Phonegap 3.6.で解決した方法です

Inappbroswer cordovaプラグインをインストールします。

cordova plugin add org.Apache.cordova.inappbrowser

Phonegapアプリをできるだけ標準のWebページに近づけたいと思っていました。リンクにtarget = "_ blank"を含めると、外部ページで開くようになりました。

これは私がそれを実装した方法です：

$("a[target='_blank']").click(function(e){
  e.preventDefault();
  window.open($(e.currentTarget).attr('href'), '_system', '');
});

次のようなリンクを使用するだけです

<a href="http://www.example.com" target="_blank">Link</a>
16
pastullo

これはどう？

<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>

編集：

これは、関連する可能性があります： onclickイベントで複数のJavaScript関数を呼び出す方法？

私はこれについてどう考えていましたか：

コードに追加：

$(".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');
});

その後：

<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>
10
Red2678

プラグインをインストールするには、config.xmlでgap：pluginタグと完全修飾IDを使用する必要があります。

<gap:plugin name="org.Apache.cordova.inappbrowser" />

文書化されているように ここ 。

9
wildabeast

私はcordova 6.0を使用していますが、ここに私の解決策があります：

1：このCordovaプラグインをインストールします。

cordova plugin add cordova-plugin-inappbrowser

2：次のように、htmlに開いているリンクを追加します。

<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>

3：これは多くの問題に直面したため、これが最も重要なステップです。cordova.jsファイルをダウンロードし、wwwフォルダーに貼り付けます。次に、index.htmlファイルでこれを参照します。

<script src="cordova.js"></script>

このソリューションは、環境AndroidとiPhoneの両方で機能します。

7
Tabish

以下の例を試してください。

<a class="appopen" onClick="OpenLink();">Sign in</a>


<script>
function OpenLink(){
    window.open("http://www.google.com/", "_system");
}
</script>

phoneGapバージョン3.1以降を使用している場合、config.xmlに以下の行を追加します

<gap:plugin name="org.Apache.cordova.inappbrowser" />
3
Piyush

私はあなたと解決策が同じ問題を抱えていましたinclude_phonegap.jsファイルを<head> InAppBrowserを使用するすべてのページで。

すべてのコードは大丈夫です！追加する必要があるのは<script src="phonegap.js"></script>あなたの<head>セクションのindex.html

プラグインのドキュメントセクションのPhonegapには次のように書かれているため、これは少し奇妙です。

「プラグインがjs-module要素はCordovaにプラグインjavascriptをロードするよう指示し、<script>参照は、プラグインをロードするために必要になります。 これは、コアCordovaプラグインの場合です "

また、InAppBrowserはコアコルドバプラグインです。しかし、何らかの奇妙な理由で、phonegap.jsファイル（少なくとも0.3.3バージョン）。

[〜＃〜] note [〜＃〜]：バグを見つけました。 3つのファイルを含める必要があると言う人もいます：phonegap.js、cordova.jsおよびcordova_plugins.js。しかし、この3つのファイルを含めると、iOS 7ではアプリが正常に動作しますが、iOS 6ではプラグインの使用を無視します（使用方法：Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3）。

あなたは私の SOの質問 でもっと見ることができます。

これがあなたの助けになることを願っています！

3
Jabel Márquez

遅い答えですが、多分それは誰かに役立つでしょう。だから私はiOSとAndroid Cordovaに基づくアプリケーション。

1）inAppBrowserプラグインがあることを確認します

cordova plugin add cordova-plugin-inappbrowser --save

2）device.jsに追加する

function openURL(urlString){
  let url = encodeURI(urlString);
  window.open(url, '_system', 'location=yes');
}

3）新しいリンクを作成する

<a href="#" onClick="openURL('http://www.google.com')">Go to Google</a>
1
Alexander Novichenko

IOの場合、MainViewController.mで以下を実行します

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
    {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
            return NO;
        }
    } 

    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; 
}

編集：Androidの場合、CordovaWebViewClient.JavaのshouldOverrideUrlLoadingで以下を実行します。

public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if(/*check if not external link*) {
            view.loadUrl(url);
          } else {
            //prepend http:// or https:// if needed
            Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(i);
          }
          return true;
        }
1
Frane Poljak

これ iOSでは完璧に機能しました。

上記のリンクで述べたように：

1-次のコマンドを使用してプラグインをインストールします。

cordova plugin add https://git-wip-us.Apache.org/repos/asf/cordova-plugin-inappbrowser.git

2-そして、HTMLファイルで、必要に応じて次のいずれかを使用します。

window.open(‘http://example.com’, ‘_system’);   Loads in the system browser 
window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view
1
Loukan ElKadi

の代わりに target="_blank"、 つかいます target="_system"外部ブラウザ（アプリの外部）で開きたいリンクの場合。次に、これらのリンクをクリックすると、デバイスがアプリからシステムのブラウザーアプリ（SafariまたはChrome）に切り替わり、リンクが開きます。

0
teddyespo

これが私の仕事の仕方です。

  1. Config.xml（phonegap）に_<gap:plugin name="org.Apache.cordova.inappbrowser" />_を追加します
  2. 私のhrefは次のように見えます：<a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
  3. 非常に重要なのは、最初から欠けていたものをヘッダーにCordovaスクリプトを追加することです。_<script src="cordova.js"></script>_理由はわかりませんが、それがないと機能しません。

うまくいけばそれが助けになる

0
onlymushu

config.xmlの編集プラグインエントリにsource = "npm"を追加します。 '<' gap：plugin name = "org.Apache.cordova.inappbrowser" source = "npm"> '

0
Sai

PATH環境変数に問題がある可能性があります。このリンクを試してください。

Apache Cordovaドキュメント

Phonegap/Cordova –外部ページへのリンク方法

0
Anita Demos

pastullo's answer を適応させて、Cordova InAppBrowserで開くことができるWebAppでも動作するようにしました。

function initOpenURLExternally() {
    $("a[target='_blank'],a[target='_system']").each(function (i) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href !== "#") {
            $this
                .attr("onclick", "openURLExternally(\"" + href + "\"); return false;")
                .attr("href", "#");
        }
    });
}

function openURLExternally(url) {
    // if cordova is bundeled with the app (remote injection plugin)
    log.trace("openURLExternally: ", url);
    if (typeof cordova === "object") {
        log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
        if (typeof cordova.InAppBrowser === "object") {
            log.trace("InAppBrowser exists");
            cordova.InAppBrowser.open(url, "_system");
            return;
        }
    }

    // fallback if no cordova is around us:
    //window.open(url, '_system', '');
    window.open(url, '_blank', '');
}
0
Pedi T.