前言

在ionic中，有一款cordova外掛inAppBrowser可以實現外部網頁的載入，然而現在我們不用這款外掛，使用iframe的方式來實現。

效果預覽

必要說明：在pdf.js的預覽檔案訪問需要翻牆才能看到效果，關於存在的跨域問題，我們在程式碼中做了真機模式下的訪問，並且隱藏了pdf.js控制元件中的下載，列印等不常用功能。

關於pdf的網頁化處理

在github上的一款外掛 pdf.js , 可以將pdf以網頁的形式來進行訪問處理，詳情請看文件，此處不是重點。

github演示地址

以瀏覽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;
}

從程式碼中就可知道這是一種模擬進度的方式，先執行一個週期3s的動畫到90%,等載入完成後，直接到100%, 0.6s 後進度條隱藏。這是一種在沒有載入進度api中的一種模擬處理方案，僅作為開發參考！