1. дома
  2. Вопрос и ответ
  3. PhoneGap: открыть внешнюю ссылку в браузере по умолчанию (вне приложения)

PhoneGap: открыть внешнюю ссылку в браузере по умолчанию (вне приложения)

2013-11-15 5 views
23

Я пытаюсь открыть ссылки в Safari (на iPhone) из приложения PhoneGap. Я использую PhoneGap версии 3.1.0 и использую PhoneGap Build, чтобы создать приложение.PhoneGap: открыть внешнюю ссылку в браузере по умолчанию (вне приложения)

У меня есть две ссылки на странице (см. Ниже в www/index.html). Обе ссылки открываются внутри приложения PhoneGap. Я вижу, что PhoneGap загружен правильно, потому что alert ('устройство готово!');.

Что нужно изменить, чтобы открыть ссылки в браузере по умолчанию (вне приложения)?

Файл 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

источник

2013-11-15 Martin

+0

В чем проблема здесь .... ??? –

+0

@mvp Я предполагаю, что ссылки не будут открыты в Safari. – Jacob

+0

здесь, в коде ur u, пытающемся inAppbrowser, он откроется в другом окне внутри самого приложения .. u хотите открыть в браузере справа ..? –

ответ

10

Как abo это?

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

EDIT:

Это может относиться: How to call multiple JavaScript functions in onclick event?

Я думал, как об этом:

Добавить в код:

$(".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>

источник

2013-11-18 16:51:24 Red2678

+0

Эта ссылка ничего не делает на моем iPhone - потому что onclick doesnt return false, чтобы предотвратить его после href = "#". Когда я добавляю return false (например: Test link 2), Google открывается внутри самого приложения: http://i.imgur.com/xKj1XZB.png – Martin

+0

Изменено для предотвращения поведения по умолчанию – Red2678

+0

Как вы могли заметить, у меня был метод openUrl в javascript, который я опубликовал в своем оригинальном комментарии. Я вижу, что вы вызываете openUrl с двумя аргументами, поэтому я предполагаю, что вы вызываете другой метод, и прокомментировал мой собственный метод openUrl (который принимает только один аргумент). Когда я проверяю это, ничего не происходит. – Martin

9

Вы должны использовать пробел: плагин тэг и полное идентификатор в вашем config.xml для установки плагинов:

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

Как документально here.

источник

2013-11-19 00:31:35 wildabeast

+0

У меня есть эта строка: , и я вижу, что он добавлен на вкладке плагинов в PhoneGap Build. http://i.imgur.com/e90CzMR.png. Нужно ли удалить номер версии? – Martin

+1

AFAICT это не открывает ссылку в браузере по умолчанию. Он открывается в InAppBrowser. Это не одно и то же. Например, когда я являюсь приложением Facebook, и я нажимаю ссылку, он открывает ссылку в InAppBrowser. Если у вас есть опция также «Открыть в Safari». Это вторая функция, которую я ищу.Не для InAppBrowser – gman

+0

@gman вам необходимо передать параметр «_система» на ссылку window.open, чтобы использовать системный браузер вместо inappbrowser. см. решение Red2678 выше. – wildabeast

3

попробуйте использовать этот нижеприведенный пример.

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


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

добавить эту строку ниже в config.xml, если вы используете PhoneGap версии 3.1 или выше

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

источник

2013-11-20 03:39:45 Piyush

+0

Google открывается внутри самого приложения: http://i.imgur.com/xKj1XZB.png – Martin

+0

Посмотрите это. Возможный дубликат этого http://stackoverflow.com/questions/10244965/phonegap-opening-external-urls-in-safari/17849217#17849217 –

+0

@NijilNair Я добавил код: function openlink2() {var ref = window.open (encodeURI ("http://www.google.com/"), '_система', 'location = no'); } и добавил ссылку: Another link. Google по-прежнему открывается внутри самого приложения: http://i.imgur.com/xKj1XZB.png – Martin

0

Это, как я получил мое работать.

  1. В config.xml (PhoneGap) добавить <gap:plugin name="org.apache.cordova.inappbrowser" />
  2. Мои hrefs выглядеть как следует: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
  3. Очень важно, что я не хватало с самого начала, добавьте скрипт Cordova в своем заголовке: <script src="cordova.js"></script> Я не Я не знаю почему, но для меня это не работает.

Надеется, что поможет

источник

2014-06-11 13:05:58 onlymushu

3

У меня был та же проблема, что вы и раствор включают phonegap.js файл в <head> на все страницах, где я буду использовать InAppBrowser.

Весь ваш код в порядке! Единственное, что вам нужно добавить это: <script src="phonegap.js"></script> в вашем <head> разделе на вашем index.html

Это немного странно, потому что PhoneGap в своем плагине документации раздела говорит:

«Если плагин использует js-module элемент для направления Cordova загрузить плагин JavaScripts, то никаких <script> ссылок не нужны будет загрузить плагин. Это случай для основных Cordova плагин "

И InAppBrowser - это основной плагин cordova. Но по какой-то странной причине не работает, пока вы не включите в нее файл phonegap.js (по крайней мере, в версии 0.3.3).

ПРИМЕЧАНИЕ: Я нашел ошибку. Некоторые люди говорят, что вы должны включить 3 файла: phonegap.js, cordova.js и cordova_plugins.js. Но когда я включаю эти 3 файла, мое приложение отлично работает в iOS 7, но в iOS 6 игнорируют использование плагина (с использованием: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

Вы можете увидеть больше в моих SO question.

Надеюсь, это может вам помочь!

источник

2014-06-11 18:48:26

14

Это, как я решил в Кордова/PhoneGap 3.6.3

Установите inappbroswer Cordova плагин:

cordova plugin add org.apache.cordova.inappbrowser

Я хотел, чтобы мой PhoneGap приложение как можно более близкими к стандартному веб page: Я хотел, чтобы с помощью 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>

источник

2014-10-03 08:53:16 pastullo

+1

Это решение работает, но что, если я хочу использовать другую перемычку для переходов https://crosswalk-project.org/ вместо использования переходов по умолчанию для webview, используйте хром-движок в качестве веб-просмотра по умолчанию, поэтому если я использую плагин inappbrowser, нет смысла переходить на плавник, что мне делать? –

-1

Для тех, кто не заметил его в оригинальный вопрос вам также необходимо убедиться, что URL-адрес, который вы пытаетесь открыть, не включен в белый список, добавив тег доступа в конфигурацию .XML следующим образом:

<access origin="http://www.example.com" />

или вы можете сделать

<access origin="*" />

, чтобы что-нибудь

источник

2014-10-16 04:07:36 gamozzii

1

Для Иос, в вашем 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]; 
}

EDIT: Для Android, в CordovaWebViewClient.java, in shouldOverrideUrlLoading do следующее:

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; 
     }

источник

2015-05-22 13:18:59

0

редактировать config.xml Добавить источник = "НПМ" на входе плагина. < 'gap: plugin name = "org.apache.cordova.inappbrowser" source = "npm">'

источник

2015-10-11 10:52:32 Sai

+2

Привет! Это было бы великолепно, если бы вы отредактировали ваш ответ, чтобы поместить пример кода в форматированный блок кода и добавить небольшое объяснение к нему. –

1

This отлично работал для меня на 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

источник

2016-08-22 09:55:46

4

Я использую Кордову 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: это самый importaint шаг в связи с этим я столкнулся много вопроса: загрузить файл cordova.js и вставить его в папку www. Затем сделайте ссылку на это в файле index.html.

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

Это решение будет работать как для Android, так и для iPhone.

источник

2016-09-01 05:37:06 Tabish

-2

В случае, если вы пытаетесь открыть ссылку во внешнем веб-браузере, попробуйте использовать class = "external" для тега Anchor.

<a class="external" href="www.google.com" >Link</a>

Надеюсь, это поможет!

источник

2017-06-28 18:24:31

0

Я адаптировал pastullo's answer для работы также в WebApp, который может быть открыт в кордове InAppBrowser, но также и в обычном веб-приложении (например,для тестирования):

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', ''); 
}

источник

2017-10-07 10:53:36

Смежные вопросы

 Смежные вопросы