ionic中第三方网页,pdf等的载入处理和loading动画的实现

本文链接：https://blog.csdn.net/Tyro_java/article/details/73058952

前言

在ionic中，有一款cordova插件inAppBrowser可以实现外部网页的载入，然而现在我们不用这款插件，使用iframe的方式来实现。

效果预览

这里写图片描述

必要说明：在pdf.js的预览文件访问需要翻墙才能看到效果，关于存在的跨域问题，我们在代码中做了真机模式下的访问，并且隐藏了pdf.js控件中的下载，打印等不常用功能。

关于pdf的网页化处理

在github上的一款插件 pdf.js , 可以将pdf以网页的形式来进行访问处理，详情请看文档，此处不是重点。

github演示地址

https://github.com/johnnynode/ionic-samples

以浏览pdf网页为例进行说明

pdf的模块中的view层

<ion-view view-title="PDF浏览" class="pdf out-pages" cache-view="true">
    <ion-nav-bar>
        <ion-nav-buttons>
            <back-btn></back-btn>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content>
        <!-- 用于显示iframe加载中的进度条 -->
        <div class="load-progress" iframe-load></div>
        <iframe type="application/pdf" ng-src="{{pdfSrc}}" width="100%" height="100%"></iframe>
    </ion-content>
</ion-view>

pdf的模块中的controller

.controller('pdfCtrl', [
   '$scope',
   '$stateParams',
   '$sce',
   function ($scope, $stateParams, $sce) {
       $scope.pdfSrc = $sce.trustAsResourceUrl($stateParams.pdf);
}]);

iframeLoad指令

.directive('iframeLoad', function ($timeout) {
     return {
         restrict: 'A',
         link: function (scope, element) {
             var ele = element[0];
             var theFrame = element.next()[0];
             ele.style.width = '90%'; // iframe 未提供加载进度接口, 解决方案: 执行一个动画,首先加载到90%
             theFrame.addEventListener('load', function (e) {
                 if (!e) {
                     return ele.style.display = 'none';
                 }
                 // 进度条走完并且消失
                 ele.style.width = '100%';
                 $timeout(function () {
                     ele.style.display = 'none';
                 }, 600);
             }, false);
         }
     };
 })

加载中的动画参考

/* 加载中的进度条 */
.out-pages .load-progress {
    width: 0;
    height: 2px;
    position: absolute;
    z-index: 999999;
    top: 44px;
    background-color: #00b100;
    transition: width 3s ease 0s;
    -webkit-transition: width 3s ease 0s;
}

.out-pages iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.out-pages ion-content {
    background-color: #f3f3f3;
    top: 0;
}