Define User Agent on InAppBrowser from Cordova

Question

I use InAppBrowser plugin from Cordova and I would like to open a webpage from my app (Android, iOS). However, the website should know if the user has entered by the mobile browser or through my app.

I though that changing the user agent from my app would be able to work. Is there a similar solution to that?

I guess right before I open a new window I should define that the user has entered the website through my app.

window.open("http://test.example.com", "_blank", "location=no");

Answer 1

Sure, you could do:

window.open("http://test.example.com?entry=app","_blank","location=no");
// see how we added ?entry=app query string?

and then somewhere in the JavaScript of the web page that you are opening up, just parse out the "entry" parameter and do whatever specific thing you want to do based on the value of entry.

You may need to set some cookie or something though if you want to use this logic on multiple pages, because if they click on a link within the InAppBrowser, it will loose the ?entry=app query string.

I suppose you could try to override the URL every time they click on a new link in the InAppBrowser using an addEventListener("loadstart",fn). This way the function fn would get called every time the user clicks on a new page and here you could rewrite the URL. It could be something like:

var ref = window.open("http://test.example.com?entry=app", "_blank", "location=no");
ref.addEventListener("loadstart", IABcallback);

function IABcallback(event){
    if( event.url.substr(event.url.search(/entry/, '')) === "entry=app"){
        // This is a lazy check for "entry" paramater, you should use a library or something
        console.log("already have entry=app query string");
    }else{
        // open a new window with the same URL but add ?entry=app
        ref = window.open(event.url+"?entry=app", "_blank", "location=yes");
        // reattach this event listener since it is a new window
        ref.addEventListener("loadstart", IABcallback);
    }
}

This works "okay." The major problem is that it opens up a new InAppBrowser window every time they tap a link on top of the current window, making the back button unusable. You could try to get around this by using ref.close() to close the window and then reopen it, but I was having problems getting this to work. I also tried using a custom name for the window (instead of "_blank"), but this did not work either. So, sorry that this is a somewhat incomplete answer but hopefully it can give you some idea. It'd probably be much easier to just initally load the app with the custom query string and then remember that you came from the InAppBrowser via localStorage or a cookie or something.

Answer 2

In Ios, inappbrowser creates iframe. So you can check that if there is an iframe created in your html that means it is an inappbrowser otherwise its a regular mobile browser.

if(document.getElementById("_cdvIframeBridge")){ 
 alert('its an inappbrowser')
 }else{ 
 alert('its a mobile browser') 
}