I'm developing an iPhone app using PhoneGap, Xcode, HTML and JavaScript. I have an iFrame that should view documents (right now I am using a test document instead of allowing the user to choose - that's coming later) that have been downloaded (again, i chose the document). I tried using a .pdf file and a .docx file which are both supported by iPhone, but clicking the button I coded opens them in Safari instead of the iFrame. Here's the code to view the document (JavaScript and HTML);
function viewOnline() {
var site = "file://" + pathToRoot + "/editme.txt"
$('#myIframe').attr('src', site);
}
<button onclick="viewOnline();">View Online</button></li>
<iframe id="myIframe" style="width: 210; height: 210px;" seamless="seamless" src=""></iframe>
Is it just not possible to view .pdf etc files in iFrame or is there something wrong with my code?
** pathToRoot is coded (and tested to be correct) elsewhere in the application - so i don't need to hard-code the file path, which will change when i transfer it to the device instead of the simulator.
** if you need the code where i download the file, then i can give you it - just comment below
** I'm also fairly new to working with Xcode and PhoneGap so if i need to alter something with them if you could give as much detail as possible that would be great - Thanks so much in advance
Edit
I know about the OpenWhitelistURLsInWebView, and have enabled it and allowed the website i'm downloading from in the ExternalHosts array - but it still won't work.
It's not possible. Most of the mobile browsers doesn't come preloaded with Adobe plugins and all. It's not a desktop you see. Its a mobile. So it's not possible unless you create a own browser and include the adobe plugin(meaning you have to write pdf rendition logic because the plugin wont work in mobile).
iFrames are very rarely needed and are often employed for wrong reasons. Often you can achieve the exact same thing you are going for using normal styles and simpler markup.
Also, googling phonegap/cordova iframe gives many results that spell out trouble with iFrames. For the official implications guide on them see iFrame Usage.
In your case these are the things you need to consider:
Enabling iFrames on PhoneGap-iOS requires that you whitelist the
iframe domains and enable "OpenAllWhitelistURLsInWebView". While this
doesn't sound like a problem, many applications want to open specific
sites in MobileSafari (not a ChildBrowser), which cannot be
accomplished easily when "OpenAllWhitelistURLsInWebView" is enabled.
To change OpenAllWhitelistURLsInWebView open the Cordova.plist file in
Xcode.
To whitelist a domain. Add it to the ExternalHosts array in the
Cordova.plist file. Simply press the + next to the ExternalHosts title
and when the item0 appears bellow add your domain to the value section
(in the format example.com).
Related
I use embed tag to display 1 pdf file, how do I make when I press Ctrl + F it only searches the pdf file, not the current page. I tried searching on google but no desired result.
You will not find a single answer on google they use two methods themselves.
Generally it should not be possible unless the embedment has control of the pdf search function, You need to understand that a binary pdf viewer embedded in a html page cannot be controlled by the html page, it can pass options like .pdf#search=words during loading. That usually works with Firefox but not Chrome derivatives, but that's as far as cross application security should allow. The best you can target is combine Page and part strings, like this:-
So there are frame controls to assist user in some cases, but not accessible from HTML, nor can the embed see the surrounding HTML.
A Firefox alternative secure Plugin that will ignore both external and internal PDF JavaScript's
Chromium Edge where there is no external control but the PDF may perhaps have scripting allowed.
My chrome packaged app contains a PDF, and I would like to let the user view it. If I open it in the current frame I get the error "Chrome PDF Viewer is not Allowed".
Frankly, the chrome PDF viewer is pretty awful, so I'd rather let the user view it in their PDF viewer of choice anyway. If I disable the chrome PDF plugin (just as an experiment) and I try to open the PDF using chrome.app.window.open, it "downloads" the PDF, and then the user could open it. But this has two issues:
I can't realistically make the user go to chrome://plugins and do that disable
There isn't any browser window, so the user has no idea the download happened
Any suggestions? Opening PDFs that are embedded in my app is kind of a must-have feature for this app.
I've looked at this extensively, and have come to the conclusion that there's no way to get a Chrome App to open a PDF that's local. I, too, have tried data URIs.
I don't think the issue is the PDF support in the window, as it's still Chrome, or the size of the PDFs. Rather, I think it's just an engineering problem, one that might get solved someday.
As for me, I build the PDF in my Chrome App. Since I can't display it, and there's no server to upload it to, I write it to a file of the user's choosing and let the user deal with it on his/her own.
I've got this working, but whether it is a solution for you depends a lot on your use case. The solution has three parts:
Use pdfjs to do the actual rendering.
To get this running in a packaged app, you'd need to do some violence to the internationalization support. And even after you do that, you'll find that some PDFs refuse to load for no apparent reason whatsoever. So don't bother trying to make pdfjs work in a packaged app. Just:
Put your entire app into a <webview> with a persist partition, and use a HTML5 cache manifest to get all your files available for offline viewing.
Yeah, yeah, I know that cache manifests are not cool anymore. But if you can list all your files for use in a packaged app, then you are doing the one case where cache manifests actually work great.
Then use a packaged app to distribute a tiny wrapper around your page with the webview in it.
You'll also get the benefit that you don't have to rewrite your app to live within the draconian packaged app rules (eval, sync xhr, 2GB limit, etc.).
You can see a working example at m.kaon.com/c/ka (visit with Chrome to get the desktop app; if you visit that with Firefox, you'll get access to a hosted app that is using the same tricks). PDFs are down in the bottom "Why Choose Kaon" section.
I'm trying to add a visual impaired option to an HTML5 based kiosk that runs offline. The idea is that once a a button is clicked each page's text is read out loud (only 1 text box per page which is loaded from external txt file) speak.js seems like an option but the voice quality isn't that great. I had a look at some chrome plug ins but they all require you to select the text first. I'd like to try jTalk but still waiting on a download link from the creator - not sure if that will work anyway as this needs to run locally on the windows 7 pc serving as the kiosk. The chrome plugins seem to work nicely but they all require the text to be selected and I'm not sure how I could control text being read or not via n HTMl/JS link anyway. therefore ideally I'd like a Jscript library that would let me execute the command on a page per page basis.
Any ideas / suggestions?
Thanks!
I think http://www.chromevox.com might have what you are looking for. It's a chrome extension for vision-impaired users and has an api you can use.
I am currently creating a Chrome extension (which uses javascripts mainly) that allows users to scrape the images on a webpage and download them. I have finished the link scraping part, and the code will return an array like:
["http://example.com/image1.jpg","http://example.com/image2.jpg"]
But how do I download all of the links in ONE CLICK? I tried listing all photos on a new tab and let the users to Ctrl+S save the page. But this greatly affects the UI and I do not like it. I do not host webpage so server side script may not be working.. Any other solutions?
As far as I know, Chrome extensions technically can't save files to disk like Firefox.
The only way to do this is using NPAPI
Unfortunately, extensions using npapi will most likely not be accepted by the Web Store due to security problems. Of course it'll be okay if you use it for yourself or host the extension on your website.
You can install and examize the code of the following extensions, maybe you can even use the provided npapi too:
Screen Capture (by Google) https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg
Chrome Toolbox (by Google) https://chrome.google.com/webstore/detail/fjccknnhdnkbanjilpjddjhmkghmachn
Awesome Screenshot: Capture & Annotate https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
Download Asisstant (by Google) - got killed I guess.
We have an "application" consisting of a large number of PDF files that link to each other.
Some of the PDF files have links that must be a web URL when running on a PC (or a Mac) but need to open a specific application when running on an iPad.
When not on the iPad, the links look like "http://10.85.1.102".
When on the iPad, they look like "netcam4://2" - which opens the NetCam4 application with camera 2 selected.
NOTE: this is already working but we have to create two versions of the PDF and it would be much better to have only one.
Is there a way using JavaScript (or ActionScript or whatever) for the PDF to determine in which OS it is being displayed and modify the link appropriately?
We don't care if this decision is made when loading the PDF or when the link is clicked.
By the way, so far we have found that GoodReader on the iPad is the only PDF viewer that will properly follow links - including those to the NetCam4 app.
Not really. PDF is generally run through a browser plugin and shouldn't have script running inside of it.
On the other hand, if you are serving these files up over http, you might be able to modify the contents of the PDF based on how they are compressed and what language you have on the server. PHP has PDFLib, for example, as well as Zend_PDF