前言在ionic中有一款cordova插件inAppBrowser可以实现外部网页的载入然而现在我们不用这款插件使用iframe的方式来实现。效果预览必要说明在pdf.js的预览文件访问需要翻墙才能看到效果关于存在的跨域问题我们在代码中做了真机模式下的访问并且隐藏了pdf.js控件中的下载打印等不常用功能。关于pdf的网页化处理在github上的一款插件 pdf.js , 可以将pdf以网页的形式来进行访问处理详情请看文档此处不是重点。github演示地址https://github.com/rwx-robot/ionic-samples以浏览pdf网页为例进行说明pdf的模块中的view层ion-view view-titlePDF浏览 classpdf out-pages cache-viewtrue ion-nav-bar ion-nav-buttons back-btn/back-btn /ion-nav-buttons /ion-nav-bar ion-content !-- 用于显示iframe加载中的进度条 -- div classload-progress iframe-load/div iframe typeapplication/pdf ng-src{{pdfSrc}} width100% height100%/iframe /ion-content /ion-viewpdf的模块中的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中的一种模拟处理方案仅作为开发参考