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.
Related
I'm been using the WebView in my project to show a couple of webpages in app.
On Android this works fine. but on iOS it's open the default browser insted of showing it in app, like when you use
Device.OpenUri(new Uri(e.Url))
My code look like this
webView = new WebView
{
Source = new UrlWebViewSource
{
Url = "http://www.google.com",
},
VerticalOptions = LayoutOptions.FillAndExpand
};
this.Content = webView ;
Any one here who know how to make the iOS open the page in-app ?
Using Device.OpenUri will often even according to the Xamarin documentation here, navigate outside the application.
If you want to host the content within your application, the best approach would be to embed the Webview, that it looks like your doing, and set the .Source to a url.
I don't understand why your using Device.OpenUri if you have a WebView instance already on your page.
Just set the .Source property of the WebView to point at some url.
For example:-
WebView objMyWebView = new WebView();
objMyWebView.Source = "http://www.google.com";
When I try to reload the titanium webview true webview.reload(), the view does not reload correctly. Instead if loading the page it gives me a page not found.
what i'm doing:
In Titanium i make use of webviews to display data. These webviews make use of HTML that is stored in the local filesystem that Titanium offers. The webview is called url is set by :
webview.setUrl( Ti.Filesystem.applicationDataDirectory.toString() + 'index.html');
This sets the proper url for the webview, it let's me see the correct html page. When I use webview.reload(), it seems lost... is there a way to reload the webview, or should i remove and then add the webview again?
Setting a URL for WebView the resource is usually loaded from the Resources folder.
So try to move all HTML files there (into Resources, same folder where app.js is located) and simply use.
webview.setUrl('index.html');
This has worked for me both on iOS and Android.
(There is an issue related to Android regarding WebView and setting its content by html property but this shouldn't matter here)
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')