用外部文件的文件夹制作网页 [英] Make a web page with a folder of external files
问题描述
以前，我使用$sce.trustAsHtml(aString)将字符串(例如<html>...</html>)注入模板
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 responded 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 (Not Found).
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).
我出于测试目的创建了两个文件: index.html 和 script.js . 这是一个 plunker ，既不是template也不是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...
推荐答案
如果愿意，可以使用<object>.
<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>
在此处中查看更新的插件.
这篇关于用外部文件的文件夹制作网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
