如何在带有angularjs的网页中嵌入外部文件？

Question

我想展示txt和pdf文件的内容，并将它们嵌入到网页中。

这些文件位于具有不同域的with服务器上。

我怎么能把这些包括进去？是否使用iframe进行的唯一更改？或者我也可以使用embed或不同的标记吗？如果是，怎么做？

<iframe ng-src="{{some.url.text.or.pdf}}"></iframe>

Answer 1

您可能会遇到以下几个问题：

1. 默认情况下，角将拒绝将ng-src设置在您的域之外。要克服这种情况，请使用这里描述的$sce.trustAsResourceUrl - How to embed an external file in a webpage with angularjs?
2. 您所引用的任何外部url仍然可能通过在响应头中设置X-Frame-Options: SAMEORIGIN来拒绝嵌入它，并且您不能对它做任何事情。如果存在这样的标题，浏览器将拒绝嵌入。
3. 并不是每种文档类型都可以嵌入，而且支持严重依赖于浏览器和它的插件。
4. 当涉及到在iframe中嵌入任何内容时，问题是，如果内容不是来自同一来源，则无法获得它的大小。使得无法计算适当的iframe大小。因此，通常以糟糕的用户体验告终。因此，在嵌入任何文档之前，请考虑用户是否最好将其作为下载或单独的窗口。

要获得不带iframe/embed的PDF特定解决方案，请查看此Recommended way to embed PDF in HTML?后

Answer 2

不完整，但类似的东西

<iframe iframe-set-dimentions-onload width="90%" my-frame="fullyLoaded()" ng-attr-srcdoc="{{htmlResponse}}" id="iFrame">

.directive('iframeSetDimentionsOnload', [function(){
         return {
         restrict: 'A',
         link: function(scope, element, attrs){
         element.on('load', function(){
            if(window.localStorage.getItem("iFrameHeight")==="present")
              iFrameHeight = element[0].contentWindow.document.body.scrollHeight+125 + 'px';
            else
              iFrameHeight= element[0].contentWindow.document.body.scrollHeight+'px';
            element.css('height', iFrameHeight);
            });
         }
}}])

在$scope.fullyLoaded()加载之后，做您想做的任何事情

如果文件是cors问题，则文件位于具有不同域的then服务器上，则是不同的情况