How to have ChildBrowser open all PDF files - ios

Question

I am using Xcode 4 with PhoneGap (Cordova 1.6) and ChildBrowser. I've used SiteCrawler on OSX to successfully download a website and localize it, and it is fully browsable locally with images, PDFs, etc. I have moved all the localized site files into the PhoneGap www folder and the app test builds fine - the site is fully browse able.
I want the PDFs on the site to open in their own window, and ChildBrowser does this perfectly as far as my needs. Using http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ I was able to get ChildBrowser installed and working - I have PDF files opening in the ChildBrowser.
My problem is that using the link above, I have to add ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" to every PDF link on the site. Since we use a CMS, this isn't much of a problem - the bulk of PDFs are called from a template with data filled in from the CMS and they are fine. But there are some pages in the site where the client has added a link to an uploaded PDF into the content of the page. In this case, there is no easy way to add the above code to the inline link.
I figured that I can use jQuery to look at each a tag on the page when clicked and if clicked, run the ChildBroswer instance, and this would cover both types of PDF links, but I can't seem to get it to work. Here is what I have:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
$('a[href$=pdf]').click(function() {
var href = $(this).attr('href');
cb.showWebPage(encodeURI(href));
return false;
});
</script>
Using the above with no inline link javascript, the PDF opens on its own, without child browser.
Using the below along with ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;", child browser will open, and for some links shows the PDF, and for others just says loading. I figure this is just tweaking for paths, but I think the above would be most universal if it can be made to work.
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
cb.showWebPage(encodeURI(file));
}
</script>

Answer 1

Through trial and error I was able to get this working for the most part. I'm still hitting a couple of unrelated bugs (well, related to Childbrowser but not the loading go local PDF files).
So, using ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" on all links to PDFs on the site is still the way to go. What changed was the JS function I am using to determine the path to the PDFs and launch ChildBrowser. I had to do this:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
var path = location.pathname+file;
var len = path.length;
var locleft = path.indexOf('/www/')+4;
var trim = len-locleft;
var left = path.slice(0,-trim);
var locright = path.indexOf('/assets/');
var trim = len-locright;
var right = path.slice(-trim);
var finalPath = left+right;
cb.showWebPage(encodeURI(finalPath));
}
</script>
in my included header file (so it lives in the head of every page on the site). The problem was that when ChildBrowser pulled up the path to the file, it was appending the part below the normal site's web root (/assets/documents/xxx.pdf) to the full path to the page being viewed in the app at the time, so I ended up with:
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf
when we wanted:
/var/users/name/blah/blah/www/assets/documents/xxx.pdf
The script above prepends location.pathname to the file var passed from the function (ontouch start) that calls ChildBrowser so that we end up with
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf (not correct)
It then splits it into a left section (everything before /www) and a right section (everything including and after /assets/) and then concatenates them (effectively removing all the site directory and html file information) and then calls ChildBrowser with that finalPath. Working for me.