使用外部文件的文件夹制作网页

Question

，我使用$sce.trustAsHtml(aString)将字符串（例如，<html>...</html>）注入到模板<div ng-bind-html="content"></div>中，以便在加载生成的[=63]时显示图形=]:

.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）？然后，index.html 中的 <script src="script.js"></script> 将知道它指的是同一文件夹中的 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 and script.js. Here is a plunker，template 和 templateUrl 都没有有效，正如所解释的...

Answer 1

如果您愿意，可以使用 <object>。

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

查看更新的 plunker here。

Answer 2

我也分享了 <iframe> 的解决方案：

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

和一个plunker.

iframe的问题是恐怕还有（隐藏的）边框，默认情况下框架可能不会占据整个网页。

Answer 3

您包含的脚本是随机的 javascript 还是来自其他 angular 项目？

我以前做过，但记不清具体的步骤了，但希望这能为您指明正确的方向：

将您要包含的 URL 列入白名单。
我代替 ng-include 看看我是如何处理 return 路径的函数的。
同样在路由中需要添加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 并附加视图，而不是 returns 它，因为当我加载外部应用程序时它把我所有的 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**'
    ]);
});

Answer 4

我找到了解决方案，但可能有点过头了。我创建了一个 script 指令，它将把未加载的 script 放到 document 的 head 中。像这样：

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 文件放在某个地方，我可以稍微调整一下并使用它来得出这个 working plnkr

使用外部文件的文件夹制作网页

Make a web page with a folder of external files

javascript

canvas

angularjs

angular-ui-router

angularjs-sce