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

0

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

Файлы расположены на веб-сервере с другим доменом.

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

<iframe ng-src="{{some.url.text.or.pdf}}"></iframe>
  • 0
    пожалуйста выложите свой угловой контроллер

2 ответа

1
Лучший ответ

Вы можете столкнуться с несколькими проблемами:

  1. Угловое отклонит настройку ng-src из вашего домена по умолчанию. Чтобы преодолеть это, используйте $sce.trustAsResourceUrl как описано здесь - Как встроить внешний файл в веб-страницу с помощью angularjs?
  2. Любой внешний url, на который вы ссылаетесь, все еще может отрицать его вложение, имея X-Frame-Options: SAMEORIGIN установленный в заголовках ответов, и вы ничего не можете с этим поделать. Браузер откажется внедрить, если такие заголовки присутствуют.
  3. Не каждый тип документа может быть встроен, и поддержка сильно зависит от браузера и плагинов.
  4. Когда дело доходит до внедрения чего-либо в iframe, проблема в том, что вы не можете получить размер содержимого, если он не из одного источника. Невозможно рассчитать правильный размер iframe. Таким образом, обычно заканчивается плохой пользовательский опыт. Поэтому, прежде чем внедрять какой-либо документ, подумайте, лучше ли пользователю загружать его или в отдельном окне.

Для конкретного PDF-решения без iframe/embed проверьте это сообщение. Рекомендуемый способ встраивания PDF в HTML?

-1

не полный, но что-то вроде

<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, то это другой случай

Ещё вопросы

Сообщество Overcoder
Наверх
Меню