个人中心
gpt4 book ai didi

html - IE 中 pdf 对象上的 Angular 显示框

转载 作者：行者123 更新时间：2023-11-28 16:26:07 24 4
gpt4 key购买 nike

我正在使用 angular 的 pdf 查看器，我想在动态对象上显示一个 div。 div 在除 IE 之外的所有浏览器中都显示在对象上方。在这里看到这个是一个笨蛋:http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview .

您会发现它在 Chrome 和 FireFox 中运行良好，但在 IE 中却不行。你能帮忙的话，我会很高兴。甚至是正确方向的一点。

应用程序.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$sce) {
  $scope.name = 'World';
  $scope.documentSrc = "http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf";

  $scope.frameSrc = $sce.trustAsHtml($scope.documentSrc);
  $scope.frameCode = $sce.trustAsHtml('<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" type="application/pdf"></object>');
  $scope.display = false;

  $scope.changeDoc = function(){
    $scope.documentSrc = 'https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf';
  };
  $scope.changeDocAgain = function (){
    $scope.documentSrc = 'http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf';
  };
  $scope.displayDiv = function (){
  if ( $scope.display == false){
    $scope.display = true;
  } else{
    $scope.display = false;
  }
}})

.directive('embedSrc', function () {
   return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.$watch(
          function() {
            return attrs.embedSrc;
          },
          function() {
            element.attr('src', attrs.embedSrc);
          }
  );
}
 };
})
.directive('dynamicObject', function($parse) {
return {
  restrict: 'E',
  link: function(scope, element, attrs) {
    scope.$watch(function() {
      return $parse(attrs.data)(scope);
  }, function(newValue) {
     element.html('<object data="' + newValue + '" type="application/pdf"></object>');
      });
    }
  };
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
    Search Options
</button>  
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>  
<dynamic-object data="documentSrc"></dynamic-object>

样式.css

.displayDiv{
    position: absolute;
    background: red;
    width: 280px !important;
    z-index: 1000;
    padding:10px 10px 0px !important;
    height: 50px;
}

.pdfView{
    height: 710px;
    width :100%;
    z-index : 50;
}

以上是以plunker中使用的demo代码为例。下面的代码是我在我的元素中的代码。 

.directive('objectReloadable', function ($rootScope) {
    var link = function (scope, element, attrs) {
        var currentElement = element;
        var watchFunction = function () {
            return scope.searchCriteriaService.documentSrc;
        };
        var updateHTML = function (newValue) {
            scope.searchCriteriaService.documentSrc = newValue;
            var html = '';
            if (attrs.datatype == 'pdf') {
                html = '<iframe type="application/pdf" src="' + newValue + '" class="mp-document-size" ></iframe>';
            } else if (attrs.datatype == 'html') {
                html = '<object data="' + newValue + '" type="text/html" class="mp-document-size"></object>';
            } else {
                html = '<img src="' + newValue + '" width="100%" style="overflow:scroll"/>'
            }
            var replacementElement = angular.element(html);
            currentElement.replaceWith(replacementElement);
            currentElement = replacementElement;
        };

        scope.$watch(watchFunction, function (newValue, oldValue) {
            if (newValue !== oldValue) {
                updateHTML(newValue);
            }
        });
        if (scope.searchCriteriaService.documentSrc) {
            updateHTML(scope.searchCriteriaService.documentSrc);
        }
    };
    return {
        restrict: 'E',
        scope: false,
        link: link
    };
})

最佳答案

以下是我可以制作的最小的工作 app.js。它使用 iframe 和 Google Docs 查看器工作，发现 here和 here .

var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope,$sce) {
      $scope.name = 'World';
      $scope.iframeSrc = "http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true";
      $scope.display = false;
      $scope.changeDoc = function(){
        $scope.iframeSrc = 'http://docs.google.com/gview?url=https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf&embedded=true';
      };
      $scope.changeDocAgain = function (){
        $scope.iframeSrc = 'http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true';
      };
      $scope.displayDiv = function (){
        if ( $scope.display == false){
          $scope.display = true;
        } else{
          $scope.display = false;
        }
          
      }
    })
    
    .directive('iframeSrc', function () {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          scope.$watch(
            function() {
              return attrs.iframeSrc;
            },
            function() {
              element.attr('src', attrs.iframeSrc);
            }
          );
        }
      };
    })
    .directive('dynamicObject', function($parse) {
      return {
        restrict: 'E',
        link: function(scope, element, attrs) {
    
          scope.$watch(function() {
    
            return $parse(attrs.data)(scope);
    
          }, function(newValue) {
    
            element.html('<iframe src="' + newValue + '" type="application/pdf"></iframe>');
          });
        }
      };
    });
.displayDiv{
    position: absolute;
    background: red;
    width: 280px !important;
    z-index: 1000;
    padding:10px 10px 0px !important;
    height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>AngularJS Plunker</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <button ng-click="changeDoc()">Change Doc</button>
        <button ng-click="changeDocAgain()">Change Again Doc</button>
        <br/><br/>
        <button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
                    Search Options
        </button>
        <div ng-if="display" class="displayDiv">displayMe!</div>
        <br/>
        <dynamic-object data="iframeSrc"></dynamic-object>
      </body>
    
    </html>

关于html - IE 中 pdf 对象上的 Angular 显示框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36091093/

24 4 0
文章推荐： html - 在面包屑箭头形状的元素之间添加白色分隔符
文章推荐： javascript - $ ("#id_name").text() 无法识别手动输入到文本框中的数据；在 jQuery 中
文章推荐： javascript - 如何将文本框和其他 html 元素值获取到标签中？
文章推荐： jquery - 尝试将 staggerTo 与 GSAP 一起使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com