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); });
Related
I'm working on an app with a custom url scheme.
It is opening some webpage for authentication in a chrome tab. This is done in xamarin forms like this:
Browser.OpenAsync(apiUrl + "mobile", new BrowserLaunchOptions
{
LaunchMode = BrowserLaunchMode.SystemPreferred,
TitleMode = BrowserTitleMode.Hide,
});
everything work as expected if I return a webpage with a link and click the the link manually:
Click here to go the app
But if i return a 302 redirect to the same url it will not close the chrome tab and dont focus the app again.
If i add a javascript in the response, it will not automatically open the url (close the chrome tab and focus the app)
I've tried things like this:
window.location = url;
window.open(url,'_self');
setTimeout(()=>window.open(url,'_self'),10);
(url is a valid variable, even tried alert(url) after changing the location and it show the correct url.
Why does it only work when I click the link manually?
In order to maintain the user's security and experience, the browser prohibits the direct use of window.open(URL) in JS to open new links.
Try to change like below:
setTimeout(()=>window.open(url,'_self'),500); //The delay time must not be too short or you will be intercepted
I am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.
For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
window.open(urlData, "_blank", "location=no,enableviewportscale=yes");
I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.
Alternative: just store that whole data string in your database. Then when you render your tag you can simply dump it into the src
attribute:>" />
After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.
Thanks
First, window.open probably isn't working because all URLs have to be granted access specifically, for security. You can try to bypass it with this in your config.xml -- I don't know if it will work for data: URLs.
<access origin="*" subdomains="true"/>
<preference name="WebSecurity" value="disable"/>
If this doesn't work, how to show an image in a pop-up comes down to the design of your app. If you're using something like Ionic Framework, Bootstrap, jQueryUI, or Ratchet, they each have components for Modals or Dialogs you could potentially use. If you're not using a UI framework, you'll have to design your own pop-up div to contain the image tag, that is hidden again when you tap or dismiss it. Finding information on Google about how to do this is not very hard.
Good luck!
I am able to solve this issue in BlackBerry using below steps.
1)Remove webWorks.js from index.html
2)Replace below script inside index.html
<script src="worklight/cordova.js"></script> to <script src="../../cordova.js"></script>
3) Add below code inside js file. Need to pass urlData as Base64 string and filename.
requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function (fs) {
var ft = new FileTransfer(),
localPath = fs.root.toURL() + fileName;
ft.download(urlData, localPath, function (entry) {
entry.file(function (file) { console.log(file.size); });
window.open(localPath, "_blank", "location=yes,closebuttoncaption=Close,enableViewportScale=yes");
}, function (e) { console.log('download error'); console.log(e); });
});
I'm facing a problem when I create a program by PhoneGap.
in my program, I'm using a local index.html file in my main activity, after the index.html loaded, I'm using window.open to redirect my page to an external page from the other server.
window.open("http://192.168.0.11/test.html", '_self');
now the page redirect to test.html, cordova.js was included in test.html:
//included the cordova js file in test.html file
<script src="js/cordova.js"></script>
in test.html, I called the the "exitApp" method of cordora as following:
function onExit()
{
navigator.app.exitApp();
}
however, I saw the error message as following in ADT logcat:
Uncaught TypeError: Cannot call method 'exitApp' of undefined
but this file is working when I call it by local e.g. file:///adnroid_asset/www/test.html
anyone can help me on this? thanks in advance.
Don't use window.open. Basically it'll try to open it in a new window and you'll lose the reference to Cordova objects. Use:
window.location.href = "http://192.168.0.11/test.html"
Which will simply load the give url in the same page, keeping the Cordova objects.
More details on the differences here.
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)
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.