I am fairly new to Ionic and Cordova and I am using Cordova to create an application.
I've written code to open an InAppBrowser window in order to share a link via Google+.
My code works fine however, once the user has shared the link they are redirected in the InAppBrowser to their Google+ page. How would I go about closing the InAppBrowser window after the user has successfully shared their post?
$scope.googleShare = function(url){
var siteToShare = "https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo rawurlencode("+url+")";
var options = "location=no,toolbar=yes,toolbarposition=top"
var ref = window.open(siteToShare, '_blank', options);
ref.addEventListener('loadstop', function(event){
if(event.url.match("mobile/close")){
ref.close();
}
})
console.log(siteToShare);
}
You can automatically close the InAppBrowser by listening for the loadstart event, which is fired whenever the browser starts loading a new page. If you use loadstop, the user will see that the browser goes to a different page.
The following code is an example as to how you can close the browser using the loadstart event. All you have to do is replace "part of URL here" with whatever works for you.
ref.addEventListener('loadstart', function(event) {
if(event.url.indexOf("part of URL here") > -1) {
ref.close();
}
});
Related
I have a link that opens in the inappbrowser and when I proceed with the webpage that is loaded in the inappbrowser , any other link should not get opened if one link is already running in inappbrowser.
Whereas when I click other link, it loads over the previous running link and I clearly do not want that
Any help is much appreciated!
Here is the source code:
universalLinks.subscribe(null, function (eventData) {
ref = cordova.InAppBrowser.open(eventData.url, '_blank', 'location=yes');
setTimeout(function () {
ref.close();
}, 320000);
});
I'm using cordova to open a remote url inside my app. My problem is that I obtain a blank screen during the few secondsof content loading.
Is there a way to "hide" the browser view during the time it finishes to load the content ?
Thank you
There is hidden parameter:
var options = "location=yes,hidden=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
addEventListener('loadstop', loadStopCallBack);
function loadStopCallBack() {
inAppBrowserRef.show();
}
See the plugin docs for example details.
I am trying to open en external url from a local html file. For example, i am using super.loadUrl("file:///android_asset/www/index.html"); to call local file and the application opens it in the browser provided by DroidGap. However, there is a problem with the external url. In index.html, i am trying to reach http://www.google.com via an image button and the device opens another browser to show www.google.com (in my device, chrome is opening to show the page www.google.com). I want to let DroidGap browser to open both external and local urls in DroidGap browser.
I have achieved this because I needed the same solution. I assume you already know how to load the local file but just in case ...
//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');
First Add and event listener like this to the main js of your app from which you are calling var ref = window.open().
ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js
Then create a local file called closeInAppBrowser.html some where in your /www/ folder it just so happens that mines is in /www/pages/
Now define the LoadStart function so that when the page starts to load LoadStart() will fire
//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
// alert("fun load stop runs");
ref.close();
}
Now in the SomeLocalFile.html that you are going to use window.open() with, place a link and js like this.
// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>
$('.close').click(function(){
//We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
//We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
window.location = '../../pages/closeInAppBrowser.html';
});
Now when you click the link it will attempt to navigate to closeInAppBrowser.html this will trigger LoadStart() and it will check if the event.url file name matches "closeInAppBrowser.html" and if so it will close the window.
I have tested this and it works 100%. Let me know if you have any other questions
Actually there is no need to use child browser plugin, if you upgrade phonegap to 2.3.0 or above, so that you can use InAppBrowser
sample
var ref = window.open(authorize_url, '_blank', 'location=no');
ref.addEventListener('loadstart', function() { me.locChanged(event.url,ref); });
In a phonegap-android application i want to open an external link within the application.
For this i used a plugin childBrowser and it works fine.
But the external link is taking time to load for which i want to show a wait/loading message.
I also tried to open the external link through ajax-call, updating the div with the response page. and until reponse is not received i am showing a loading message but the problem with this approach is that page loses its styles and other structure.
I guess this is because i am putting entire external page inside the div tag which cannot render the entire page as the browser can do it.
Code snippet looks like-
<script type="text/javascript">
function loadPage(url) {
var xmlhttp = new XMLHttpRequest();
// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState === 4){
if (xmlhttp.status === 200) {
document.getElementById('container').innerHTML = xmlhttp.responseText;
}
}
};
xmlhttp.open("GET", url , true);
xmlhttp.send();
}
</script>
How can i achieve this, can I override childBrowser?
Also
if i want to open the page in applications' web view then how can i achieve the same for web-view.
EDIT: As per Same origin policy one cannot call to a outside domain using xhr request.
Okay understood. i checked in browser and got expected error: 'XMLHttpRequest cannot load'
But then how does it shows/opens the url in mobile?
Ofcourse the page is not fully functional and thats my original issue.
i would post this as a separate question, but its related to my original question
Thanx.
Any hints/suggestions would be great.
I want to open a url(ex. www.google.com) in jquery mobile android app.
I want to open it with in the context of the app itself. i dont want to open a diffrent browser to launch it on the click of the link or button. i want to open it with in the app.
is it possible.
Thanks.
Found the solution here:
function openInWebView(url)
{
var anchor = document.createElement('a');
anchor.setAttribute('href', url);
var dispatch = document.createEvent('HTMLEvents')
dispatch.initEvent('click', true, true);
anchor.dispatchEvent(dispatch);
}
Then call the function like this in your app:
openInWebView('http://google.com')