How to embed an external file in a webpage with angularjs?

Question

I'd like to show the content of both a txt and a pdf file and embed these into a webpage.

The files are located on a webserver with a different domain.

How can I include those? Is the only change using an iframe? Or could I also use the embed or different tags? If yes, how?

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

please post your angular controller – messerbill Oct 29 '15 at 16:25 — messerbill, Oct 29 '15 at 16:25

score 1 · Accepted Answer · edited May 23 '17 at 10:27

There are several issues you may encounter:

Angular will deny you setting ng-src out of your domain by default. To overcome this use $sce.trustAsResourceUrl as described here - How to embed an external file in a webpage with angularjs?
Any external url you refer, may still deny embedding it by having X-Frame-Options: SAMEORIGIN set in the response headers and you can't do anything about it. The browser will deny embedding if such headers are present.
Not every document type can be embedded and the support depends heavily of the browser and it's plugins.
When it comes to embedding anything in iframe, the problem is that you cannot get the size of the content if it's not from the same origin. Making it impossible to calculate proper iframe size. Thus usually ending up in bad user experience. So before embedding any document, consider if user is better off having it as a download or in a separate window.

For a PDF specific solution without iframe/embed check out this post - Recommended way to embed PDF in HTML?

score -1 · Answer 2 · answered Oct 29 '15 at 16:54

not complete but something like

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

do whatever u want after loading at $scope.fullyLoaded()

The files are located on a webserver with a different domain If it's a cors issue , then it's a different case

How to embed an external file in a webpage with angularjs?

2 Answers2