Question

我想显示txt和pdf文件的内容，并将其嵌入网页。

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

我如何包含这些内容？使用iframe的唯一更改是？或者我也可以使用embed或不同的标签吗？如果是，怎么样？

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

Answer 1

您可能会遇到几个问题：

Angular会拒绝您默认将ng-src设置为域外。要解决此问题，请使用此处所述的$sce.trustAsResourceUrl - How to embed an external file in a webpage with angularjs?
您引用的任何外部网址仍可能通过在响应标头中设置X-Frame-Options: SAMEORIGIN来拒绝嵌入它，您无法对其进行任何操作。如果存在这样的标题，浏览器将拒绝嵌入。
并非所有文档类型都可以嵌入，并且支持很大程度上取决于浏览器及其插件。
在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问题，那么它就是一个不同的案例

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

2 个答案: