Javascript 如何使用angularjs在网页中嵌入外部文件？

我想显示

txt

和

pdf

文件的内容，并将它们嵌入到网页中

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

我怎样才能包括这些？是否使用

iframe

进行唯一更改？或者我也可以使用

嵌入

或不同的标记吗？如果是，如何进行

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

---

不完整，但类似

<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);
            });
         }
}}])

.directive（'iframeSetDimentionsOnload'，[function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
on（'load'，function（）{
if（window.localStorage.getItem（“iframehight”）=“present”）
iFrameHeight=element[0].contentWindow.document.body.scrollHeight+125+'px'；
其他的
iFrameHeight=element[0].contentWindow.document.body.scrollHeight+'px'；
css（'height'，iframehight）；
});
}
}}])

在$scope.fullyLoaded（）加载后，执行您想要的任何操作

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

---

如果是cors问题，则是另一种情况

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

默认情况下，Angular将拒绝您在域外设置

ng src

。要克服此问题，请按此处所述使用

$sce.trustAsResourceUrl

：

您引用的任何外部url仍可能通过在响应头中设置

X-Frame-Options:SAMEORIGIN

来拒绝嵌入它，您对此无能为力。如果存在此类标头，浏览器将拒绝嵌入

并不是每种文档类型都可以嵌入，而且支持程度很大程度上取决于浏览器及其插件

当涉及到在

iframe

中嵌入任何内容时，问题是如果内容不是来自同一来源，则无法获得内容的大小。使得无法计算正确的

iframe

大小。因此通常会导致糟糕的用户体验。因此，在嵌入任何文档之前，先考虑用户是否有更好的下载或单独的窗口。

---

对于没有iframe/embed的PDF特定解决方案，请查看本文-

请发布您的角度控制器