Как встроить внешний файл в веб-страницу с угловыми?

Question

Я хотел бы показать содержимое файла txt и pdf и вставить их на веб-страницу.

Файлы размещаются на веб-сервере с другим доменом.

Как я могу включить их? Это единственное изменение с использованием iframe? Или я мог бы также использовать embed или другие теги? Если да, то как?

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

Answer 1

Есть несколько вопросов, которые могут возникнуть ter:

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. Таким образом, обычно заканчивается плохой пользовательский опыт. Поэтому, прежде чем внедрять какой-либо документ, подумайте, лучше ли пользователю загружать его или в отдельном окне.

Для PDF без конкретного решения iframe/врезать проверить этот пост - 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, то это другой случай