Open url in webview - phonegap

Question

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. The code you have will never work. 2. If you are opening an external URL so that your app works as a website wrapper, your app could be reject by the app stores. A common mistake with Cordova/Phonegap is [When designing the app, thinks phonegap works like a website or webbrowser.](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md#005) — , Jan 29 '16 at 18:50
@jcesarmobile currently the problem is the SO. window.open with InAppBrowser works fine in android, and your answer also works. However both failed in ios. In iphone I am getting white page when should open the webview. — user2990084, Feb 03 '16 at 11:39

score 20 · Accepted Answer · answered Feb 02 '16 at 07:03

20

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.

answered Feb 02 '16 at 07:03

tnt-rox

5,400
2
38
52

thanks. apparently works for android, but not for IOS. – user2990084 Feb 02 '16 at 11:20
@user, I use this on iOS daily )) – tnt-rox Feb 02 '16 at 11:45
Can you confirm the IOS version please? – user2990084 Feb 02 '16 at 11:46
copied from live cordova production code window.open(url, '_blank', 'location=yes'); Works perfectly if you have the inappbrowser plugin installed. – tnt-rox Feb 02 '16 at 12:03
have you added InAppBrowser plugin to the iOS ? – tnt-rox Feb 02 '16 at 15:24
yes I have. Here is my xml. https://codeshare.io/Vw3Fl This config will not work in IOS. – user2990084 Feb 02 '16 at 19:05
Hi, will you try using _system as second parameter instead of _self. this will force the app to use the default system browser to open google. ) – tnt-rox Feb 03 '16 at 12:35
ok, got it. The problem is the site's certificate. Not allowed by ios. – user2990084 Feb 03 '16 at 15:54

score 8 · Answer 2 · answered Feb 01 '16 at 13:41

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

score 3 · Answer 3 · answered Sep 14 '16 at 15:04

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

score 0 · Answer 4 · answered Jan 29 '16 at 17:25

0

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>

answered Jan 29 '16 at 17:25

apollosoftware.org

12,161
4
48
69

score 0 · Answer 5 · answered Feb 01 '16 at 12:30

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.

score 0 · Answer 6 · answered Jan 29 '18 at 10:03

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>

Open url in webview - phonegap

6 Answers6

Linked