web-dev-qa-db-de.com

Öffne URL in Webview - Phonegap

Ich würde gerne wissen, wie ich eine URL im app-Kontext von embed webview öffnen kann. Zur Zeit öffnet diese Demo eine neue Registerkarte im externen Browser, also nicht das, was ich erwartet habe. Ich verwende google.com nur zum Testen.

Zusammenfassung, ich suche nach einer funktionellen Demo.

<?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: Komplette XML-Datei: https://codeshare.io/Vw3Fl

14
user2990084

versuchen :

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

anstatt :

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

Dies wird den InAppBrowser verwenden und _self als Ziel verwenden.

18
tnt-rox

Sie müssen diese Zeile in der config.xml hinzufügen, um die Navigation zu externen URLs zu ermöglichen

<allow-navigation href="*" />

Dies ermöglicht die Navigation zu einer beliebigen externen URL. Wenn Sie die Navigation einfach google zulassen möchten, fügen Sie diese Zeile hinzu

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

Sie können den Rest der Dokumentation auf der Plugin-Seite überprüfen

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

7
jcesarmobile

Wenn Sie dieses Problem bei der Verwendung von Phonegap 6.3.1 haben, sollten Sie die URLs ordnungsgemäß in die Positivliste aufnehmen und das cordova-plugin-inappbrowser-plugin verwenden.

Lesen Sie weiter, wie das geht.


Stellen Sie zunächst sicher, dass Sie die URLs, die Sie öffnen möchten, auf der Whitelist haben. Sie können dies tun, indem Sie sie den Hrefs von <access>-Tags, <allow-intent>-Tags und allow-navigation-Tags in Ihrer config.xml-Datei im Stammverzeichnis des Projekts hinzufügen. Etwas liek th:

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

(Hinweis: Das "*" in den obigen Anweisungen erlaubt das Öffnen von URLs/Pfaden. In der Produktion möchten Sie wahrscheinlich bestimmte URLs/Pfade einschränken.)

Fügen Sie in Ihrer index.html-Datei das folgende Javascript hinzu:

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

Dieses Skript verwendet das Plug-in cordova-plugin-inappbrowser, das, wenn Sie Ihre Anwendung mit der Standardvorlage von Phonegap erstellt haben, bereits in der Datei config.xml enthalten sein sollte.

Das Skript wartet, bis das Gerät bereit ist, und verwendet dann das cordova-plugin-inappbrowser-plugin , um die angegebene URL zu öffnen. Der Parameter '_self' bedeutet, dass die Seite in der Phonegap-Webansicht geöffnet wird. 'location=no' bedeutet, dass keine Adressleiste angezeigt wird. Weitere Parameteroptionen finden Sie in der Dokumentation zum Plug-in für cordova-plugin-inappbrowser (Link oben).

Um die Anwendung in den entsprechenden Emulatoren zu testen (vorausgesetzt Sie haben die Phonegap CLI installiert), führen Sie die folgenden Befehle aus:

phonegap run ios --verbose --stack-trace
phonegap run Android --verbose --stack-trace
1
Neil Atkinson

Möglicherweise müssen Sie der phonegap-XML-Datei Folgendes hinzufügen:

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

installieren Sie das folgende Plugin, indem Sie diese Befehle in Ihr Projektverzeichnis eingeben

phonegap plugin add cordova-plugin-whitelist
phonegap prepare

fügen Sie dann die folgenden folgenden Tags in index.html hinzu 

<!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>
0
Ahmed Mahmoud

Eine sehr einfache Methode zum Öffnen der Seite im Systembrowser in einer Phonegap-Anwendung besteht darin, diese Seite in einem Iframe darzustellen.

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

Sie können die URL im iframe mit dom update ändern.

Dies wird auf der Seite im systemeigenen Browser geladen.

0
Abhishek Jain