2016-01-29 2 views
14

Я хотел бы знать, как я могу открыть URL-адрес в контексте приложения embed webview. В настоящее время эта демонстрация откроет новую вкладку во внешнем браузере, поэтому не то, что я ожидаю. Я использую google.com только для тестирования.Open url in webview - phonegap

Резюме, я ищу функциональную демонстрационную версию.

<?xml version="1.0" encoding="UTF-8"?> 

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml --> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
     xmlns:gap = "http://phonegap.com/ns/1.0" 
     xmlns:android = "http://schemas.android.com/apk/res/android" 
     id  = "com.xxx.xxxxx" 
     version = "1.0.0"> 

    <preference name="stay-in-webview" value="true" /> 

    <access origin="*" browserOnly="true" subdomains="true" /> 

    <content src="index.html" /> 

    <allow-navigation href="https://google.com/*" /> 

    <gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" /> 
    <gap:plugin name="org.apache.cordova.inappbrowser" /> 
    <gap:plugin name="org.apache.cordova.splashscreen" /> 

    <preference name="phonegap-version"   value="cli-5.4.1" /> 
    <preference name="permissions"    value="none"/> 
    <preference name="target-device"    value="universal"/> 
    <preference name="fullscreen"     value="true"/> 

</widget> 

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    </head> 
    <body> 
     <div> 
      <script type="text/javascript" charset="utf-8"> 
       document.addEventListener("deviceready", onDeviceReady, false); 

       function onDeviceReady() { 
        window.location.href = 'https://google.com'; 
       } 
      </script> 
     </div> 
     <script type="text/javascript" src="cordova.js"></script> 
    </body> 
</html> 

Update: Полный файл XML: https://codeshare.io/Vw3Fl

+0

1. Код, который у вас есть, никогда не будет работать. 2. Если вы открываете внешний URL-адрес, чтобы ваше приложение работало как обертка веб-сайта, ваше приложение может быть отклонено магазинами приложений. Общей ошибкой с Cordova/Phonegap является [При разработке приложения, думает, что телефонная игра работает как веб-сайт или веб-браузер.] (Https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap .md # 005) – JesseMonroy650

+0

@jcesarmobile в настоящее время проблема SO. window.open с InAppBrowser отлично работает в android, и ваш ответ также работает. Однако оба отказались в ios. В iphone я получаю белую страницу, когда должен открыть webview. – user2990084

ответ

15

попробовать:

window.open('https://google.com', '_self ', 'location=yes'); 

вместо:

window.location.href = 'https://google.com'; 

Это будет использовать InAppBrowser и использовать _self в качестве цели.

+0

спасибо. по-видимому, работает для android, но не для IOS. – user2990084

+0

@user, я использую это на iOS ежедневно)) –

+0

Можете ли вы подтвердить версию IOS, пожалуйста? – user2990084

0

Вы, возможно, придется добавить следующую строку в ваш PhoneGap XML файл:

<?xml version="1.0" encoding="UTF-8"?> 
<phonegap> 
    <access origin="https://abcx.com" subdomains="true" /> 
</phonegap> 
+0

спасибо, но никакого успеха. такая же проблема – user2990084

0

очень простой способ открыть страницу в системном браузере в приложении для телефонного разговора рендеринг этой страницы в iframe.

<iframe src="http://www.google.com></iframe> 

Вы можете изменить URL-адрес в iframe, используя dom update.

Это будет загружаться на страницу в собственном системном браузере.

6

Вы должны добавить эту строку в config.xml, чтобы позволить навигацию к внешним URL-адресам

<allow-navigation href="*" /> 

Это позволит перемещаться к любому внешнему URL, если вы просто хотите, чтобы навигация в Google затем добавить этот линия

<allow-navigation href="https://google.com" /> 

Вы можете проверить остальную часть документации on the plugin page

https://github.com/apache/cordova-plugin-whitelist

0

Для тех, у кого есть эта проблема при использовании Phonegap 6.3.1, вы должны правильно настроить URL-адреса и использовать cordova-plugin-inappbrowser plugin.

Подробнее о том, как это сделать.

Прежде всего, убедитесь, что у вас есть белые адреса, которые вы хотите открыть. Вы делаете это, добавляя их в hrefs из <access> тегов, <allow-intent> тегов и allow-navigation тегов в файле config.xml в корне проекта. Что-то Лик-й:

<?xml version='1.0' encoding='utf-8'?> 
<widget id="com.phonegap.helloworld" version="1.0.0" 
     xmlns="http://www.w3.org/ns/widgets" 
     xmlns:gap="http://phonegap.com/ns/1.0"> 

    ... 

    <access origin="*" /> 
    <allow-intent href="*" /> 
    <allow-navigation href="*" /> 

    ... 

</widget> 

(. Примечание: «*» в приведенном выше hrefs позволяет открывать любой URL/пути в производстве, вы, вероятно, хотите ограничить определенные URLS/дорожки)

Далее , в вашем индексе.HTML-файл, добавьте следующий JavaScript:

<script type="text/javascript"> 
    document.addEventListener('deviceready', function() { 
     var url = 'https://www.google.com' // change to whatever you want 
     cordova.InAppBrowser.open(url, '_self', 'location=no'); 
    }, false) 
</script> 

Этот скрипт использует Cordova-плагин-inappbrowser плагин, который, если вы генерируемый приложение, используя стандартный шаблон PhoneGap, уже должны быть включены в файл config.xml.

Сценарий ожидает готовности устройства, затем использует cordova-plugin-inappbrowser plugin для открытия заданного URL-адреса. Параметр '_self' означает, что он открывает страницу в веб-просмотре Phonegap, а 'location=no' означает, что адресной строки не будет. Для других параметров см. Документацию для плагина cordova-plug-inappbrowser (ссылка выше).

Наконец, чтобы проверить приложение в соответствующих эмуляторов (если у вас есть Phonegap CLI установлен), выполните следующую команду (ы):

phonegap run ios --verbose --stack-trace 
phonegap run android --verbose --stack-trace 
0

установить следующий плагин, введя следующие команды в каталоге проекта

phonegap plugin add cordova-plugin-whitelist 
phonegap prepare 

добавьте следующие следующие теги в index.html

<!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" /> 
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" /> 
<style> 
*{ 
    margin: 0px; 
    padding: 0px; 
} body {width:100%;height:100%;margin:0;overflow:hidden;background- 
color:#252525;} 
#my_iframe{ 
    border: 0px; 
    height: 100vh; 
    width: 100%; 
    } 
    </style> 
<title>ProjectName</title> 
</head> 

<body> 
<iframe src="PUT_HERE_YOUR_PROJECT_URL" id="my_iframe" frameborder="0" width="100%" height="100%" > 
</iframe> 
</body> 

</html>