Question

我正在构建一个具有离子和角度js的cordova应用程序。我需要整合Microsoft提供的在线办公室查看器来查看单词，在应用程序中查看文档。 api要求您在iframe内加载内容。当我尝试这样做时，它会被导航到应用程序浏览器中。我尝试使用ng-include实现相同但没有任何成功。关于如何实现这个的任何想法？

我使用角1，离子1，科尔多瓦5.2。

我引用视图的API是Office Web Viewer。

以下是我尝试的示例代码。

角度代码

app.config(['$sceDelegateProvider', function ($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://view.officeapps.live.com/op/**'
  ]);
}]);

app.directive('testContent', function () {
  return {
    restrict: 'E', //bind to element tag name
    replace: true, //replace the entire markup with the template
    templateUrl: 'templates/test-content.html',
    controller: ['$scope', function ($scope) {
      $scope.GetUrl = function () { return 'https://view.officeapps.live.com/op/view.aspx?src=https://bonafidedevstorage.blob.core.windows.net/chamika-temp-blobs-1/Documents/ffe7c1fb-35bd-43ad-9e7e-68166697347b.docx'; }
    }]
  };
})

模板的

<div>
    <p>{{GetUrl()}}</p>
    <ng-include src="GetUrl()" autoscroll></ng-include>
</div>

Answer 1

我只是尝试以下正常运行的代码

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content ng-controller="mainCtrl" id="divSvg">
        <iframe height="600px" width="100%" src="https://view.officeapps.live.com/op/view.aspx?src=https://bonafidedevstorage.blob.core.windows.net/chamika-temp-blobs-1/Documents/e116d0fc-67e2-4fa4-aa26-8b0904506f72.docx"></iframe>
    </ion-content>
</ion-pane>

Answer 2

最后在同事的帮助下设法解决了这个问题，他们为这些方案提供了一个单独的网址，使用“https://view.officeapps.live.com/op/embed.aspx”。

Office Web Viewer在cordova应用程序中无法正常运行

2 个答案: