Make a web page with a folder of external files

Asked 3/3, 2017 at 1:48 Answered 10/3, 2017 at 6:39

Solved javascript angularjs canvas angular-ui-router angularjs-sce

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);
}]);

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.

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.

Does anyone know how to amend this?

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.

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).

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...

Tramway answered 3/3, 2017 at 1:48 Comment(14)

have you tried ng-include? – Deadline 3/3, 2017 at 2:54

I just tried ng-include, it has the same problem, please see my update... – Tramway 3/3, 2017 at 12:24

have you checked this #12198380 ? – Nova 6/3, 2017 at 3:1

You probably want to create a directive. docs.angularjs.org/guide/directive – Chemulpo 6/3, 2017 at 16:44

Could you create a plnkr to reproduce the problem? I read it multiple times but I don't know how to create a testing scenario. – Thy 6/3, 2017 at 17:58

please see my update: @Thy – Tramway 6/3, 2017 at 18:35

@Tramway the plnkr does not help because it does not reproduce your error. It load an template which is blocked by the following error: docs.angularjs.org/error/$sce/… Please create a plnkr that reproduces your problem. – Thy 6/3, 2017 at 18:40

@Nova one limitation is that I have to keep the code of index.html and script.js as they are; I could not add eg, type="text/javascript-lazy". I can only modify the way to load them... – Tramway 7/3, 2017 at 1:20

Please create a pluker. It is hard to help you otherwise. – Lermontov 7/3, 2017 at 1:30

I've finally made a plunker. – Tramway 7/3, 2017 at 1:43

@Tramway This could be a shot in dark because i've never come across the particular use case you are trying to solve. What if you included a base tag in the index.html page with the full url. – Instinct 7/3, 2017 at 2:6

I really don't want to modify index.html... @MikeLunn – Tramway 7/3, 2017 at 2:31

I believe you need something like this en.wikipedia.org/wiki/Cross-origin_resource_sharing to make your script downloadable. But I haven't done that, I only have read of it – Nova 7/3, 2017 at 2:32

I cheated a little i guess, but this works: plnkr.co/edit/XE0sess3I2sl6vavq5Wr?p=preview and you dont have to modify the index file, its just code in the run function. – Parliamentarian 7/3, 2017 at 8:58

You may use <object> if you prefer.

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

See updated plunker here.

Phylloquinone answered 7/3, 2017 at 8:38 Comment(2)

Great one, this was simple. What are the limitations by using object in this case? – Thy 7/3, 2017 at 9:35

object element is supported by all common web browsers; but some of its attributes like border, tabindex are not supported in HTML5. See the reference document here. – Phylloquinone 7/3, 2017 at 10:24

You script that you are including is it just radom javascript or it is from other angular project?

I have done this before but can't remember exactly the step by step process, but hope this directs you in the right direction:

White list the URL that you are including.
Istead for ng-include have a look on how I did with function that return the path.
Also in the routing you need to add lazyload to inject Views + controller

Here is how I did: To load the external controller and the view I used ocLazyLoad.

https://github.com/ocombe/ocLazyLoad and had something like this defined:

 .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');
                            }]
                        }
                }
            }
        }

To load external view I had created a function in my app that basically takes the external base url and appends the view and than returns it, because when I loaded an external app it mixed up all my URL and I had 404.

app.js

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

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

And in the view to include I had like this

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

And don't forget to whitelist the URL's in your 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**'
    ]);
});

Hutchison answered 8/3, 2017 at 0:56 Comment(4)

@Tramway I have updated my answear, I hope this helps – Hutchison 8/3, 2017 at 11:42

Thank you... The scripts I want to preview are random, but I can modify them. They are not necessarily angular project. – Tramway 10/3, 2017 at 21:47

hi @SoftTimur, I would have thought you would have marked this as the right answer as giving you several option on how to do it. – Hutchison 19/3, 2017 at 21:7

To be honest, I have not tested your answer, given <object> works for me so far. I notice one important thing from your answer: you can load external sources CROSS domain by a white list. I will keep in mind your solution and come back when I meet such a complex case... Thank you... – Tramway 21/3, 2017 at 10:10

I share also a solution by <iframe>:

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

and a plunker.

The problem with iframe is that I'm afraid there are still (hidden) borders, and the frame may not occupy the full web page by default.

Tramway answered 7/3, 2017 at 23:12 Comment(0)

I found a solution but might have gone a little too far. I created a script directive instead which will put the not-loaded script to the head of document. Something like this:

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);
    }
  };
});

But, this obviously has few limitations including the src must be some absolute path. (Can overcome that but it would be dirtier..)

I have put the sample HTML file somewhere I can tweak a little and use it to come up with this working plnkr

Fradin answered 10/3, 2017 at 6:39 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags