如何让ChildBrowser打开所有PDF文件

时间:2012-04-25 06:36:24

标签: ios cordova childbrowser

我正在使用带有PhoneGap(Cordova 1.6)和ChildBrowser的Xcode 4。我已经在OSX上使用了SiteCrawler来成功下载一个网站并对其进行本地化,并且可以在本地完全浏览图像,PDF等。我已将所有本地化的网站文件移动到PhoneGap www文件夹中,并且应用程序测试构建良好 - 网站完全可浏览。

我希望网站上的PDF在他们自己的窗口中打开,而ChildBrowser可以根据我的需要完美地完成这项工作。使用http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/我能够安装并运行ChildBrowser - 我在ChildBrowser中打开了PDF文件。

我的问题是使用上面的链接,我必须添加ontouchstart =“loadChildBrowser('/ path / to / file.pdf'); return false;”到网站上的每个PDF链接。由于我们使用的是CMS,因此这不是什么大问题 - 大量的PDF都是从模板中调用的,其中数据是从CMS填充的,并且它们很好。但是,网站中有一些页面,客户端已将上传的PDF链接添加到页面内容中。在这种情况下,没有简单的方法将上述代码添加到内联链接。

我认为我可以使用jQuery在点击时查看页面上的每个标签,如果点击,运行ChildBroswer实例,这将涵盖两种类型的PDF链接,但我似乎无法得到它工作。这就是我所拥有的:

    <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>

使用上面没有内联链接javascript,PDF自行打开,没有子浏览器。

使用下面的ontouchstart =“loadChildBrowser('/ path / to / file.pdf');返回false;”,子浏览器将打开,有些链接显示PDF,而其他链接只是说加载。我认为这只是对路径进行调整,但我认为如果可以使用上述内容将是最普遍的。

    <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>

1 个答案:

答案 0 :(得分:3)

通过反复试验,我能够在很大程度上实现这一目标。我仍然遇到一些不相关的错误(好吧,与Childbrowser有关,但没有加载到本地PDF文件)。

所以,使用ontouchstart =“loadChildBrowser('/ path / to / file.pdf');返回false;”在网站上的所有PDF链接仍然是要走的路。改变的是我用来确定PDF的路径并启动ChildBrowser的JS函数。我不得不这样做:

<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>

在我的包含头文件中(因此它位于网站上每个页面的头部)。问题是当ChildBrowser拉出文件的路径时,它将正常站点的web根目录下的部分(/assets/documents/xxx.pdf)附加到当时在应用程序中查看的页面的完整路径,所以我最终得到了:

/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf

我们想要的时候:

/var/users/name/blah/blah/www/assets/documents/xxx.pdf

上面的脚本将location.pathname添加到从调用ChildBrowser的函数(ontouch start)传递的文件var中,以便我们最终得到

/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf(不正确)

然后将它拆分为左侧部分(/ www之前的所有内容)和右侧部分(包括和之后的所有内容/ assets /),然后将它们连接起来(有效删除所有网站目录和html文件信息),然后调用ChildBrowser用那个finalPath。为我工作。