Сделать веб-страницу с папкой внешних файлов

Раньше я пользовалась $sce.trustAsHtml(aString) ввести строку (например, <html>...</html>) к шаблону <div ng-bind-html="content"></div> чтобы отобразить график при загрузке сгенерированного URL:

.state('urls', {
    url: '/urls/{id}',
    template: '<div ng-bind-html="content"></div>',
    controller: 'UrlCtrl',
    resolve: {
        url: ['$stateParams', 'urls', function ($stateParams, urls) {
            return urls.get($stateParams.id);
        }]
    }
})

app.controller('UrlCtrl', ['$sce', '$scope', 'url', function($sce, $scope, url) {
    $scope.content = $sce.trustAsHtml(url.content);
}]);

Теперь HTML для генерации графа содержит ссылки на другие файлы, например, <script src="script.js"></script>, Поэтому мне нужна папка с файлами (.html, .css, .js) нарисовать график. Я могу поместить всю папку на моем сервере, но проблема в том, как внедрить эти файлы в шаблон.

Я старался templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html', загрузка localhost:3000/#/urls/58b8c55b5d18ed6163324fb4 в браузере загружает HTML-страницу. Тем не мение, script.js НЕ загружается, ошибка Failed to load resource: the server responded with a status of 404 (Not Found) отображается в журнале консоли.

Кто-нибудь знает, как это исправить?

В противном случае, есть ли другие способы сказать что-то вроде src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html (как в iframe)? Затем, <script src="script.js"></script> в index.html будет знать, что это относится к script.js в той же папке.

Изменить 1: После комментария @Icycool я изменил на templateUrl: '/htmls/test.html', а также test.html содержит <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>, Тест показал, что он загрузился test.html а также index.html, но нет script.js: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found),

Редактировать 2: я создал два файла для тестирования: index.html и script.js. Вот плункер, ни template ни templateUrl работает, как объяснили...

Источник

4 ответа

Решение

Вы можете использовать <object> Если вы предпочитаете.

<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>

Смотрите обновленный плункер здесь.

Источник

Вы пишете сценарий, который вы включаете, это просто radom javascript или это из другого углового проекта?

Я делал это раньше, но не могу точно вспомнить пошаговый процесс, но надеюсь, что это направит вас в правильном направлении:

  • Белый список URL, который вы включаете.
  • Istead для ng-include посмотрим, как я это сделал с функцией, которая возвращает путь.
  • Также в маршрутизации нужно добавить lazyload, чтобы внедрить Views + controller

Вот как я это сделал: Для загрузки внешнего контроллера и представления я использовал ocLazyLoad.

https://github.com/ocombe/ocLazyLoad и определил что-то вроде этого:

 .state('Home', {
            url: "/home",
            views: {
                'content': {
                    templateUrl: 'http://localhost:3333/app/views/home.html',
                    resolve: {

                            loadPlugin: ['$ocLazyLoad', function ($ocLazyLoad) {
                                return $ocLazyLoad.load('http://localhost:3333/app/views/header.html');
                            }]
                        }
                }
            }
        }

Чтобы загрузить внешнее представление, я создал функцию в своем приложении, которая в основном берет внешний базовый URL и добавляет представление, а затем возвращает его, потому что, когда я загружал внешнее приложение, оно смешало все мои URL, и у меня было 404.

app.js

 $rootScope.OtherAppUrl = 'http://localhost:3333/';

 $rootScope.appendOtherAppUrl  = function(relativeURL) {
            return $rootScope.OtherApp + relativeURL;
        }

И в том, чтобы включить у меня было так

<footer relativeurl="App/views/footer.html"></footer>

И не забудьте внести в белый список URL-адреса в вашем app.js

angular.module('App').config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',

      // This code is CASE SENSITIVE
      'http://localhost:3333/app/views/header.html',
      'http://localhost:3333/app/views/footer.html',


    ]);

    // The blacklist overrides the whitelist so the open redirect here is blocked.
    $sceDelegateProvider.resourceUrlBlacklist([
      'http://myapp.example.com**'
    ]);
});
Источник

Я также делюсь решением <iframe>:

<iframe src="https://www.matrixlead.com/tmp/index.html" frameBorder="0" scrolling="no" seamless="seamless"></iframe>

и поршень.

Проблема с iframe Я боюсь, что все еще есть (скрытые) границы, и фрейм может не занимать всю веб-страницу по умолчанию.

Источник

Я нашел решение, но, возможно, зашел слишком далеко. Я создал script вместо этого директива, которая поместит незагруженный script к head из document, Что-то вроде этого:

app.directive('script', function() {
  return {
    restrict: 'E',
    scope: false,
    link: function(scope, elem, attr) {
      var scriptNode = document.createElement('script');
      scriptNode.src = attr.src;
      scriptNode.type = 'text/javascript';
      document.head.appendChild(scriptNode);
    }
  };
});

Но это, очевидно, имеет несколько ограничений, включая src должен быть какой-то абсолютный путь. (Может преодолеть это, но это было бы грязнее..)

Я поместил образец HTML-файла где-нибудь, я могу немного подправить и использовать его, чтобы придумать этот рабочий plnkr

Источник
Другие вопросы по тегам