I have a requirement to show a pdf in inappbrowser when user clicks on a link. It is working fine in ios but not working on android. I am using IBM worklight for my project. Below is the code I have used:
window.open("pdfURL","_blank","location=yes");
In ios the inappbrowser launches and displays the pdf but in android the inappbrowser is launches but no content is displayed
Unlike iOS, which has a built-in PDF viewer - Android's webview does not have PDF viewer built-in.
This is why it is going to fail in Android.
You have 2 choices in Android:
View the file using Google Docs by storing the file at a remote server and redirecting the user like so: window.open(encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf'), '_blank', 'location=yes,EnableViewPortScale=yes');
Or use a Cordova plug-in. For example this one (you can search in Google for more). For this, you'll need to learn how to create Cordova plug-ins in Worklight.
You can read more options here: Phonegap InAppBrowser display pdf 2.7.0
Try using
window.open('pdfURL',"_system","location=yes,enableViewportScale=yes,hidden=no");
where using _system will download the file and open it in the system's application like Chrome or other PDF viewers.
Use uriEncodeComponent(link) and https://docs.google.com/viewer?url= link
Doc, Excel, Powerpoint and pdf all supported.
Use the cordova in app browser.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
$("body").on("click",function(e){
var clicked = $(e.target);
if(clicked.is('a, a *'))
{
clicked = clicked.closest("a");
var link = clicked.attr("href");
if(link.indexOf("https://") !== -1)
{
if(true) //use to be able to determine browser from app
{
link = "http://docs.google.com/viewer?url=" + encodeURIComponent(link) + "&embedded=true";
}
window.open(link, "_blank", "location=no,toolbar=no,hardwareback=yes");
return false;
}
}
});
Using google drive viewer seems like a good quick option.
But moving forward they may change or depreciate their API and you will have to find a new way to support this.
Also security is another consideration here as your file is publicly available and downloadable.
I had a similar situation in a recent project and we solved it by using: pdf.js
This is a JS based PDF parser with a good set of reader functionalities.. its not as smooth as a native one but did the job for us.
It's main advantage is that we had the control over the codes and were able to open files from the device file system.
If you want to go for a more native like in-app route, then as #Idan Adar mentioned a native library + cordova plugin is the way to go.
Try this code it's working fine for me.
var inAppBrowserRef;
var target = "_system";
var options = "location=yes,hidden=no,enableViewportScale=yes,toolbar=no,hardwareback=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
It's working for me
window.open(link, "_blank","location=yes");
Related
I am creating an app for Android devices using HTML and JavaScript. I am using Crosswalk (15.44.384.12) to bundle this into an Android application, which pretty much creates an android app with a web browser built in, to run my application.
I have everything working on the Android device, but I am struggling to find out how to open a link from my app in the device's default browser using JavaScript.
If I use window.open(), it will just load within my app, which is not what I want.
I have tried using window.open('http://example.com', '_blank'), I have also tried '_system', to no avail.
Same here. All hrefs and window.open calls are opened in the WebView.
We can use a workaround that was also possible in Cordova: to intercept URLs in native Java code.
First create a custom XWalkResourceClient to intercept your urls depending on your needs:
XWalkResourceClient myResourceClient = new XWalkResourceClient(xWalkWebView){
...
#Override
public boolean shouldOverrideUrlLoading(XWalkView view, String url) {
if(url.contains("whatever")){
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(url));
startActivity(i);
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
};
and then in your activity, you can set that client to the XWalk view:
myXWalkWebView.setResourceClient(myResourceClient);
im using cordova 2.5.0 and I have problems to communicate a new window with my app with the InAppBrowser. It is possible to send back information from a page opened with InAppBrowser plugin to my cordova app.
This used to be a little involved (like polling or custom urls), but since inAppBrowser 3.0.0 you can use AllowedSchemes with the customscheme event. This is not documented yet, but can be used as follows.
To your config.xml, add
<preference name="AllowedSchemes" value="myscheme" />
with the following code in your Cordova app:
function onCustomScheme(e) {
if (e.url.match(/^myscheme:\/\/message\b/)) {
var q = parseQueryString(e.url);
console.log("Got foo message: " + q.text);
}
}
url = "https://my.example.com/";
app = cordova.InAppBrowser.open(url, "_blank");
app.addEventListener("customscheme", onCustomScheme, false);
Then from the website opened in the inAppBrowser, you can embed a link like this, which shows the message hi there in the console if you follow it.
Test
This won't work with Cordova 2.5 (it looks like you'll need at least 3.1), but as 8 is out now, it's probably a good idea to upgrade anyway.
I am trying to work with Meteor. Now I have the entire setup running in my localmachine with apache2 and the meteor.js also works when browsing the same URL from Android Emulator's Browser . Now the main problem is that I need the functionality in my android app from a local URL and here the page is not able to load the remote js. I am loading the following html using WebViews loadURL method after setting the javascript as enabled .The js embedded in the html will be something like this
<script type="text/javascript" src="http://meteor.mywebserver.com/meteor.js"></script>
<script type="text/javascript">
window.onload = function()
{
Meteor.host = "meteor.mywebserver.com";
alert(textStatus);
// Call the test() function when data arrives
Meteor.registerEventCallback("process", commentsUpdate);
// Join the demo channel and get last five events, then stream
Meteor.joinChannel("demo", 0);
Meteor.mode = 'longpoll';
// Start streaming!
Meteor.connect();
// Handle incoming events
function commentsUpdate(data)
{
alert(data);
};});
After searching around a lot I tried this stackoverflow answer
To no avail . Can anybody help me find a work around here , I cant use a local meteor.js as it wont work.
Thanks
This has since been addressed in Meteor by way of integrated Cordova, which you can read about here. Basically, you tell Meteor that you want to add the Android platform to your app, and it builds the Android project files for you. Your app will look as if it's running native, but it's really just running in a light app surrounding a "web view". In iOS this is done using WebKit, but I think in Android it depends on the version of the OS.
You will still need to deploy your app to the Play store, which requires signing the app and all.
Here is the situation:
I have a web page that needs to check through JavaScript if my app is already installed on the android device it is currently running on.
If the app is installed the page will show a link (with custom protocol) to launch the app,
otherwise the page should show a link to the android market.
I can manage the links to app and to market. The only remaining step is to detect the presence of the app on the device from within JavaScript code (or perhaps try to catch a possible error of unsupported protocol as an indication of not existing app).
When I
click on a web link with
my custom app protocol and
the app is not yet installed on the device
I can see that the android environment generates an "protocol is not supported" type error.
Unfortunately, I am not able to capture that error in the JavaScript code to divert the user to the android market.
I guess both direct detection and error detection are valid methods if they exist at all.
Any ideas how can I accomplish that?
Thanks for help.
Don't use a custom protocol.
Instead, set up your <intent-filter> to watch for a well-known URL (e.g., set the scheme, host, and path). That URL should point to the page where your "download the app" instructions lie.
Then, if the user clicks the link to the well-known URL from someplace else, it will launch your app if installed, or will bring up your Web page if not.
I also had the same question, but I solve it like this:
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) { // if is android
// your app address for local
var ifrSrc = 'intent://example.com#Intent;scheme=my_scheme;action=android.intent.action.VIEW;end';
var ifr = document.createElement('iframe');
ifr.src = ifrSrc ;
ifr.onload = function() { // if app is not installed, then will go this function
window.location = 'http://your.app_download_page.com';
};
ifr.style.display = 'none';
document.body.appendChild(ifr);
setTimeout(function(){
document.body.removeChild(ifr); // remove the iframe element
}, 1000);
} else { // if is not android
window.location = 'http://google.com';
}
Hope this can help someone may has this problem.
You can use an iframe which src url is the custom protocol of your app while at the same time you can display your webpage if the custom protocol is not handled. You can also set the iframe to invisble using frameborder="0" and width and height = 0;
I made a great app for windows with appcelerator and I want to convert it to mobile (android).
Problem is, unlike creating an app in windows where the default launcher is "index.html" and I can have all my javascript/css/html mixed in together, the mobile default launcher is app.js.
I've tried the following:
var webview = Titanium.UI.createWebView({
url : 'index.html'
});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true});
This works great however none of the api's I'm using inside of index.html are being run, it just alerts an error (undefined).
Does anyone know how to fix this issue?
EDIT:
There are only two API's I'm using in my app:
var db = Titanium.Database.open('app_data');
var device_id = Titanium.Platform.id;
you dont have access to all of the API from the webview, see link below
http://developer.appcelerator.com/question/8991/webview-usage-guideline
you will need to do most of your business logic in the js files and through the event mechanisms move data from you app to the ui level