opening native/system browser from inside inappbrowser

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I'm looking for a way to open the native or system browser using a link on a website in an inappbrowser. Using target="_system" seems to work from within the app but not from within an inappbrowser, this simply opens the link inside the inappbrowser instead of opening Safari or Chrome.

I have also tried a jQuery solution with has the same effect.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
  • confused

Posted 5 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The trick here will be that the inAppBrowser will not open the system browser, but your app will. Your inappbrowser html page will have to pass the clicked hyperlink back to the opening app, which then window.open()s the system browser.
It's a bit complicated, using executeScript() method and some polling, but nicely explained here:
http://www.telerik.com/blogs/cross-wi...
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Great! That seems to work.

[code]
//on website opened in inappbrowser
$('a[target="_system"]').on('click', function() {
localStorage.setItem('clicked_link', $(this).attr('href'));
});

//in app
win.addEventListener('loadstop', function() {
win.executeScript({ code: "localStorage.setItem('clicked_link', '');" });

var get_link=setInterval(function() {
win.executeScript(
{
code: "localStorage.getItem('clicked_link')"
},
function( values ) {
var clicked_link=values[0];

if(clicked_link) {
clearInterval(get_link);
win.close();
window.open(clicked_link, '_system');
}
}
);
});
});
[/code]
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Thanks for sharing your code. This may help others as well.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Is there a way of formatting the code?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Using <pre></pre> around the code, you can do a bit. But beware of the tight display width.
Alternatively, make a screen shot from your editor and post it as an image
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Nevermind, I'll keep it in mind for the next time :)
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
I have tried your code but it's not working for me; my scenario is like this: In index.js I need to open my external website IAB, from there my complete web-app works inside IAB. In this IAB website I have few links that I want to make it open in native browser of devices. But unable to do. And I am using npm plugin "cordova-plugin-inappbrowser" for IAB.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Would you polease stay in your own thread about this same topic, where you and I are currently working on the problem? It is quite rude to leave that running conversation and ask help in an older thread.
Especially since your code in the other thread is working correctly....you just don't see how, yet.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
OK, sorry for that.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
More testing pointed out the solution I posted doesn't always work in iOS. Most of the times the link is opened inside the IAB, 1 out or 10 times it does what you would expect.

Any ideas?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, taking a close look, it seems that your setInterval function call doesn't have the time-interval parameter specified. What would happen if you added, for instance, a time interval of 500 milliseconds?
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Nothing for iOS, on Android it seems to only break what used to work.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Isn't that strange?
The setInterval function requires two parameters: (function,interval). Additional parameters are allowed.
Are you sure you are not getting any javascript errors on that piece of code?
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
I don't see any errors. Where would you expect these to see? Android just askes where to open the link (browser of Chrome), iOS opens the link inside the IAP.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, iOS doesn't perform your win.close(), either? Does it get to that point in the code at all?
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
I guess that is the issue. If the browser is not closed, the link will never open.

I have added an alert after "var clicked_link=values[0];" which is shown when opening the IAP. This alert keeps returning ofcourse, but nothing other than that.
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Question, how would you work arround a googleads to use this code insted of a href?
Any help would be appreciatted. Thanks
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What do you mean with
"how would you work arround a googleads
?
Are you saying you want your users to stay away from Google Ads that someone else had placed on their website? If so, do you think either the website owner, or Google, or the end user would like that?
Wouldn't it be better if the user installed an Ad Blocker if he desperately needs to have ads removed from whatever app he is using?
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Who! Nothing like that its MY website MY googlead, i am bulding an app that runs php files so i need inappbrowser to display the content from the linux server...
No third party websites! The reason being is if you open an ad in iOS willopen in the same webview there is no backbutton as there is in Android so the user will have to close the app to clear the ad content and restart the app to get back to my own content if it makes any sense...
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, if this is your app and your site, then don't display Google ads if you detect that the user is using an iOS browser.
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Ok i see the point, but for using that approach i would not ask for help in the first place ...

Thanks
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You sound a bit upset. I didn't intend to upset you and may have given a wrong solution.

It was my impression, that your PHP script would generate Google ads. The app retrieves the code with Google ads from the server. Then these ads should be filtered out by the time the user gets to see them, so they won't be there.

Then I thought that this would be a bit of a complicated way to not show any ads, and that's why I suggested not to generate them in the first place.
Of course, I couldn't know that you already thought of that possibility, since you never said so.

Just out of curiosity, then: why wouldn't that approach work best?
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Not upset at all we are all grown up... Anyway, the purpose of this app will be monetization through googleads and if i go for that solution i will be loosing the iOS market share, if i can not implement a solution very similar to what this topic is all about my only solution will be to change from a banner Ad to Interstitial Ads for iOS which i am not very found of..
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
This seems to work with Android and iOS:

var ref = window.open(url, '_blank', 'toolbarposition=top,location=no');


ref.addEventListener('loadstart', function(e) {
if(e.url.indexOf('system_browser') > -1) {
ref.close();
window.open(e.url, '_system');
}
});


Best part about this: the magic is done within the app and doesn't require much effort from the guy developing the website, just add ?system_browser (or whatever you want) to the link that is supposed to open inside the system browser instead of the inappbrowser.

Having issues with my Windows developer account, so can someone test it with Windows Phone for me?
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
Nice way to handle, in this case if user click on any external link and then system browser will open as '_system' is target;but what if user go back to app?
It will have few issues that can be their like a) If user go back to app then app will relaunch as before opening external browser you have ref.close(). So user will not able to revert to last page from where he/she has navigated to external link. b) If user want the back stack navigation if he tap back button then which page will be opened ?

I am not sure this will help 100% workaround to make external link in system browser and core app remains unchanged. Please correct me if I mentioned any wrong case.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Best of both worlds I'm afraid. I haven't tried without closing the IAB but I expect this NOT to work.
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Ok i am just a newbie with PGB, let me see if i got this right, the above JS code goes in the index.js file??? and all you have to do is just to add, in this case system_browser, to the links in the webpage you open with inappbrowser so you open them in the system browser and all the "internal" links will still be open inside inappbrowser is that correct?
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
It doesn't quite work that easy I'm afraid. I use a jQuery hook that listens for clicks on certain elements and then fires the code, but there's a million ways do go about with this.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Since nobody knows what your "index.js" file contains and where it is referenced, it is hard to say whether or not the code must be placed there.

The above code is not all that is required. You should start by understanding what is being polled at http://www.telerik.com/blogs/cross-wi...
Then read the first two replies in this thread. At that moment, you will understand what this is about and see what vespino's final code is doing.

"Adding 'system_browser'" is (as I assume) meant as "include this string in the query string of the external web document's URL".
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Ok at least its a good start to know that it's possible to be done... i will get there eventually...to be honest this is the very last step of my app...so the way you have set it up, any external page request in the page within inappbrowser will open in the system browser? I will dig a bit more thanks!
Photo of Joao Silva

Joao Silva

  • 53 Posts
  • 0 Reply Likes
Thanks Petra and vespino i will try to get my head around it!
Photo of Jon Sellers

Jon Sellers

  • 8 Posts
  • 0 Reply Likes
ok here we go.

in my app index.html at the bottom I called a new index.js


script src="index.js"




in that index.js I put


win.addEventListener('loadstop', function() {

win.executeScript({ code: "localStorage.setItem('clicked_link', '');" });


var get_link=setInterval(function() {

win.executeScript(

{

code: "localStorage.getItem('clicked_link')"

},

function( values ) {

var clicked_link=values[0];


if(clicked_link) {

clearInterval(get_link);

win.close();

window.open(clicked_link, '_system');

}

}

);

});

});




inline on my webpage before the BODY tag i put


$('a[target="_system"]').on('click', function() {

localStorage.setItem('clicked_link', $(this).attr('href'));

});




then finally the link


a href="HTTP://www.google.com/" target="_system"




does that make sense?

what have I done wrong?

am I even close?

I'm using the right website?

the git

https://goo.gl/gOcwKc
(Edited)
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Start a new thread state your issue.
Your issue is likely unrelated to this.