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

2022-01-21 00:00:00 canvas angularjs javascript angular-ui-router angularjs-sce

以前，我使用 $sce.trustAsHtml(aString) 来注入字符串 (例如，<html>...</html>) 到模板 <div ng-bind-html="content"></div> 在加载生成的 URL 时显示图表:

Previously, I used $sce.trustAsHtml(aString) to inject a string (eg, <html>...</html>) to a template <div ng-bind-html="content"></div> to display a graph when loading a generated 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)来绘制图表.我可以将整个文件夹放在我的服务器中，但问题是如何将这些文件注入到模板中.

Now, the html to generate a graph contains references to other files, eg, <script src="script.js"></script>. So I need a folder of files (.html, .css, .js) to draw a graph. I can put the whole folder in my server, but the problem is how to inject these files to the template.

我试过 templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'，加载 localhost:3000/#/urls/58b8c55b5d18ed6163324fb4浏览器确实加载了 html 页面.但是，script.js 未加载，控制台日志中显示错误 Failed to load resource: the server respond with a status of 404 (Not Found).

I tried templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html', loading localhost:3000/#/urls/58b8c55b5d18ed6163324fb4 in the browser does load the html page. However, script.js is NOT loaded, an error Failed to load resource: the server responded with a status of 404 (Not Found) is shown in the console log.

有人知道怎么修改吗?

否则，是否有任何其他方式可以说类似 src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html (例如在 iframe 中)?那么，index.html中的<script src="script.js"></script>就会知道它指的是script.js 在同一个文件夹中.

Otherwise, is there any other ways to say something like src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html (like in iframe)? Then, <script src="script.js"></script> in index.html will know it refers to the script.js in the same folder.

根据@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(未找到).

Edit 1: Following the comment of @Icycool , I changed to templateUrl: '/htmls/test.html', and test.html contains <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>. The test showed it did load test.html and index.html, but NOT script.js: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found).

编辑 2: 我创建了两个文件用于测试目的:index.html 和 script.js.这是一个plunker，既不是模板 也不是 templateUrl 工作，如解释...

Edit 2: I have created two files for test purpose: index.html and script.js. Here is a plunker, neither template nor templateUrl works, as explained...

推荐答案

如果您愿意，可以使用 .

You may use <object> if you prefer.

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

查看更新的插件这里.

相关文章