I am currently using PhoneGap. I am using eclipse as my IDE. The tablet that I am developing on is a Samsung Galaxy Tab 10.1, android version 4.0.4.
Now I am trying to open a PDF on the device through my app. However it is not working. I followed the tutorial on this page, https://github.com/markeeftb/FileOpener.
Here are the changes I have made.
-> In the src folder, I made a new folder called com.phonegap.plugins.fileopener -> I copied and pasted the FileOpener.java file into the folder. -> Then in the config.xml file located in the xml folder, I added the line
<plugin name="FileOpener" value="com.phonegap.plugins.fileopener.FileOpener"/>
-> I also added the line
<script type="text/javascript" charset="utf-8" src="fileopener.js"></script>
into my index.html file
Here is the code for index.html
<!DOCTYPE HTML>
<html>
<head>
<title> PhoneGap </title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="fileopener.js"></script>
</head>
<body>
<h1>PDF Open Tester</h1>
open
</body>
</html>
Just as further information, once I have connected the tablet on my computer, when I right click on 1.pdf and check properties the file location is Computer\GT-P7510\Tablet
When I run this project on the tablet and click on the open link. The adobe reader app opens up on the home page saying "The document could not be opened". What is going wrong why is the pdf not opening with Adobe Reader? Please help if you can I would really appreciate it.
-----------------------------------After Edit 1-----------------------------------------------------------------------------------
I found the specfic error that is happening. The error is Object # has no method 'exec'
The FileOpener pluggin is expecting a URI, and you are passing it a filepath.
change:
'/sdcard/Course Content Files/1.pdf'
to:
'file:///sdcard/Course Content Files/1.pdf'
Related
My browser extension has an onboarding page, and I've implemented AlertifyJS in the tag of the HTML file as follows:
<head>
<link rel="stylesheet" href="alertify.min.css"/>
<script src="alertify.min.js"></script>
<script type="module" src="onboarding.ts"></script>
</head>
No surprises here and this works fine. However, I now want to have Alertify dialogs not just on the onboarding page, but also on external websites on which the extension is activated. How do I get alertify.min.js and alertify.min.css into my content.ts script, such that it can bring up dialogs on any website?
Thanks in advance.
I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
I'm creating a phonegap application that links to a website, which I want to load when the page is started up.
Here is what I've tried, a simple onload method calling a window.open function and I've tried a function that is called when the device is ready. I'm running the latest version of Phonegap, which is 3.5.0 and an Android HTC One running 4.4.2. Below is my code for deviceready. This code is within the index.html code, in the www folder within my Durandal applcation. I believe it's not working because I don't have the cordova.js file which is imported in the example code at this link http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#Events
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="lib/durandal/css/durandal.css" />
<script type="text/javascript" charset="UTF-8">
function onLoad () {
document.addEventListener("deviceready", function () {
window.open("http://google.com", "_system");
}, false);
}
</script>
</head>
<body onload="onLoad">
<div id="applicationHost"></div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body>
</html>
Thank you for any help. This is my first stack overflow question. Please tell me if my question format isn't right and how I can improve it for future questions. Also, please suggest other ways that I can open a window on app start up using phonegap. Another option I've considered is developing an app with Android and Java, create a WebView, but that doesn't give me the cross platform deployment I want for Android and Windows Phone and I'd like to write this simple app using HTML,CSS, JS using Durandal, and PhoneGap.
Add this line just after durandal.css addition link.
<script type="text/javascript" src="cordova.js"></script>
Without cordova.js deviceready function won't fire. You don't need to see right now where is that cordova.js. It'll be added automatically by phonegap. Right now just add this line.
I'm building out an HTML5 page. I'm using JQuery in it, and I'm getting the following two console errors.
Denying load of chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/js/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. localhost/:1
GET chrome-extension://invalid/ chrome-extension://invalid/:1
As far as I can tell everything is declared normally. Here's the top of my html page
<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/archivo-narrow.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
</head>
What's triggering this error?
When you don't use jQuery from CDN (you download jQuery for yourself, then include it), it will failed to find its source map, to fix this error download jquery source map
You can find source map path in Resource Tab in Developer Tool, then open your jQuery file, you will find something like this
/*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery-2.0.3.min.map
*/
Then go to http://code.jquery.com/sourceMappingURL, in this case = http://code.jquery.com/jquery-2.0.3.min.map, then save it in same directory as you save your jQuery file
If you just want to temperately remove this message, turn off the source maps.
For Chrome User: press Ctrl + Shift + I, click the gear icon in right hand side to open the Settings, un-check the Enable source maps.
For other user, read it Developer Tools - Source maps
Detail of problem: it is because the page included a minified JS/CSS/resource, and it was attached a mapping path of original file. Unfortunately, the file is missing in mapping path.
If you are using the Chrome extension Windows Resizer it could be to do with that see http://windowresizer.userecho.com/topic/185143-exception-in-development-tools-in-chrome-dev-m-29015302-66-and-29015353-611/ I am getting the same error. If I disable the extension I no longer get the error.
Did u registered all ur files correctly in the chrome manifest file? I Guess something is wrong there
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.