CODEWITHSUNDEEP
androidcordovawebviewphonegap-pluginsphonegap-build
user2990084
user2990084

Reputation: 2840

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

Upvotes: 15

Views: 26977

Answers (6)

Ahmed Mahmoud
Ahmed Mahmoud

Reputation: 1832

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>

Upvotes: 0

Neil Atkinson
Neil Atkinson

Reputation: 774

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

Upvotes: 3

tnt-rox
tnt-rox

Reputation: 5558

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.

Upvotes: 20

jcesarmobile
jcesarmobile

Reputation: 53361

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

Upvotes: 8

Abhishek Jain
Abhishek Jain

Reputation: 26

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.

Upvotes: 0

C0L.PAN1C
C0L.PAN1C

Reputation: 12243

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>

Upvotes: 0

Related Questions