Open url in webview - phonegap

问题

I would like to know how can I open an url in the app context of embed webview. Currently this demo will open a new tab in external browser, so, not what I am expected. I am using google.com just for testing.

Summary, I am looking for a functional 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: Complete xml file: https://codeshare.io/Vw3Fl

回答1:

try :

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

instead of :

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

This will use the InAppBrowser, and use _self as target.

回答2:

You have to add this line on the config.xml to allow navigation to external urls

<allow-navigation href="*" />

This will allow navigation to any external url, if you just want to allow the navigation to google then add this line

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

You can check the rest of the documentation on the plugin page

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

回答3:

For those having this problem while using Phonegap 6.3.1, you should whitelist the urls properly and use the cordova-plugin-inappbrowser plugin.

Read on for how to do this.

First, ensure you have whitelisted the urls you want to open. You do this by adding them to the hrefs of <access> tags, <allow-intent> tags and allow-navigation tags in your config.xml file at the root of the project. Something 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>

(Note: the "*" in the above hrefs allows the opening of any url/path. In production, you probably want to restrict to certain urls/paths)

Next, in your index.html file, add the following 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>

This script uses the cordova-plugin-inappbrowser plugin, which, if you generated your application using the standard Phonegap template, should already be included in your config.xml file.

The script waits for the device to be ready, then uses the cordova-plugin-inappbrowser plugin to open the given url. The '_self' parameter means it opens the page in the Phonegap webview and the 'location=no' means that there will be no address bar. For other parameter options see the documentation for the cordova-plugin-inappbrowser plugin (link above).

Finally, to test the application in the appropriate emulators (assuming you have the Phonegap CLI installed), run the following command(s):

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

回答4:

You may have to add the following to your phonegap xml file:

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

回答5:

A very simple way to open page in system browser in a phonegap application is by rendering that page in an iframe.

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

You can change the URL in the iframe using dom update.

This will load in the page in the native system browser.

回答6:

install the following plugin by typing these commands in your project directory

phonegap plugin add cordova-plugin-whitelist
phonegap prepare

then add the following following 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>

来源：https://stackoverflow.com/questions/35090218/open-url-in-webview-phonegap

标签

android

cordova

webview

phonegap-plugins

phonegap-build