Open url in webview - phonegap

Ich würde gerne wissen, wie kann ich öffnen Sie eine url in die app-Kontext einbetten webview. Derzeit ist diese demo wird eine neue Registerkarte öffnen im externen browser, also nicht das, was ich erwartet hatte. Ich bin mit google.com nur für die Prüfung.

Zusammenfassung, ich bin auf der Suche für eine funktionale 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

InformationsquelleAutor der Frage user2990084 | 2016-01-29

18

versuchen :
```
window.open('https://google.com', '_self ', 'location=yes');
```
statt :
```
window.location.href = 'https://google.com';
```
Dies wird verwendet, InAppBrowser, und die Verwendung als target _self.

InformationsquelleAutor der Antwort tnt-rox
7

Müssen Sie diese Linie auf dem config.xml um die navigation zu externen urls
```
<allow-navigation href="*" />
```
Dies ermöglicht die navigation zu einer externen url, wenn Sie nur wollen, zu ermöglichen, um die navigation zu google-dann fügen Sie diese Zeile
```
<allow-navigation href="https://google.com" /> 
```
Können Sie überprüfen Sie den rest der Dokumentation auf der plugin-Seite

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

InformationsquelleAutor der Antwort jcesarmobile
1

Für diejenigen, die dieses problem während der Verwendung von Phonegap 6.3.1, sollten Sie die whitelist urls korrekt und verwenden Sie die cordova-plugin-plugin inappbrowser.

Lesen Sie, wie dies zu tun.

Erste, sicherzustellen, dass Sie in der Whitelist urls, die Sie öffnen möchten. Sie tun dies, indem Sie die hrefs von <access> tags <allow-intent> tags und allow-navigation - tags in Ihre config.xml Datei im Stammverzeichnis des Projekts. 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>
```
(Anmerkung: das "*" in der obigen hrefs ermöglicht das öffnen von url/Pfad. In der Produktion, werden Sie wahrscheinlich wollen, um einzuschränken, auf bestimmte urls/Pfade)

Nächsten, in Ihrem index.html Datei, fügen Sie den folgenden javascript-Code:
```
<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 die cordova-plugin-inappbrowser-plugin, die, wenn Sie erzeugt Ihre Anwendung unter Verwendung der standard-Phonegap-Vorlage sollte bereits in Ihrem config.xml Datei.

Das Skript wartet, bis das Gerät bereit zu sein, dann nutzt die cordova-plugin-plugin inappbrowser öffnen Sie die angegebene url. Die '_self' parameter bedeutet, es öffnet sich die Seite in der Phonegap-webview und der 'location=no' bedeutet, dass es keine Adressleiste. Für andere parameter-Optionen finden Sie in der Dokumentation für das cordova-plugin-inappbrowser-plugin (link oben).

Schließlich, um die Anwendung zu testen, die in den entsprechenden Emulatoren (vorausgesetzt, Sie haben die Phonegap CLI installiert), führen Sie den folgenden Befehl(en):
```
phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace
```
InformationsquelleAutor der Antwort Neil Atkinson

Können Sie haben, fügen Sie Folgendes zu Ihrer phonegap-xml-Datei:

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

InformationsquelleAutor der Antwort ApolloSoftware

0

Einer sehr einfachen Weise zu öffnen, die Seite im system-browser in einer phonegap-Anwendung von rendering, die Seite in einem iframe.
```
<iframe src="http://www.google.com></iframe>
```
Können Sie ändern Sie die URL im iframe mit dom-update.

Dieser laden wird in der Seite in das native Betriebssystem, browser.

InformationsquelleAutor der Antwort Abhishek Jain

installieren Sie die folgenden plugins durch Eingabe dieser Befehle in Ihrem Projekt-Verzeichnis

phonegap plugin add cordova-plugin-whitelist
phonegap prepare

dann fügen Sie die folgenden folgenden tags in 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>

InformationsquelleAutor der Antwort Ahmed Mahmoud

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.