Open a link in its own phoneGap default webview

Question

i have built a PhoneGap application with crosswalk, and when i try to open a link in it,

it is not opening in the same webview, besides it launch a browser selection window.

what i want is if i click to a href it should load the webapp inside the webview that loaded the default index.html, i tried to redirect the page using js too.

i am not sure i done the integration correct, i just followed this link Codova Plugin

You should post the code that you've tried - that way someone can explain why it's not working as expected — Jim O'Brien, Jun 07 '15 at 10:05
it is a sample code, i just added the crosswalk plugin, then added a line in the index.html, Load Papa — Bijoy, Jun 07 '15 at 10:09
That still doesn't tell anybody trying to answer the question anything. Which sample code? Which `index.html` file? — Jim O'Brien, Jun 07 '15 at 10:11

score 3 · Answer 1 · answered Jun 07 '15 at 13:01

3

You need to use inappbrowser plugin to achieve that : https://github.com/apache/cordova-plugin-inappbrowser

After installing the plugin via cordova plugin add cordova-plugin-inappbrowser, you can write somethink like :

<span id="myLink">Load Pap</span>

<script>
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady()
    {
        var myLink = document.getElementById('myLink');

        myLink.addEventListener("click", function()
        {
            cordova.InAppBrowser.open('http://192.168.1.11/papa', '_self', 'location=no');
        })
    }
</script>

answered Jun 07 '15 at 13:01

Ivan Gabriele

6,433
5
39
60

inAppBrowser will launch default webview right ? not the crosswalk ? – Bijoy Jun 08 '15 at 07:30
1

Yes it's integrated into your app and you can show/hide many things (i.e. location=no hide the address bar). – Ivan Gabriele Jun 08 '15 at 08:55

score 2 · Answer 2 · edited May 23 '17 at 12:17

Ivan answer is a good solution but keep in mind that InAppBrowser open a browser over your app, for example if you need to open and external site, authenticate and then come back to your app in the state you left it.

Have you seen this SO response? Loading remote html in PhoneGap or Cleaver (Cordova) on iOS

You can also use JS:

window.location.href = <your_remote_url>

What JS have you tried ?

score 1 · Answer 3 · answered Sep 14 '16 at 14:59

For those having this problem while using Phonegap 6.3.1.

Ensure you have whitelisted the url you want to open in the <access> tag, the <allow-intent> tag and the allow-navigation tag in your config.xml file (at the root of the project):

<?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 visiting of any url/path. In production, you probably want to restrict to certain urls/paths)

Then 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).

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

Open a link in its own phoneGap default webview

3 Answers3

Linked