13

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

Community
  • 1
  • 1
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
  • have you tried `ng-include`? – Icycool Mar 03 '17 at 02:54
  • I just tried `ng-include`, it has the same problem, please see my update... – SoftTimur Mar 03 '17 at 12:24
  • have you checked this http://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include ? – Gonzalo.- Mar 06 '17 at 03:01
  • 1
    You probably want to create a directive. https://docs.angularjs.org/guide/directive – Daniel Lane Mar 06 '17 at 16:44
  • 1
    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. – lin Mar 06 '17 at 17:58
  • please see my update: @lin – SoftTimur Mar 06 '17 at 18:35
  • @SoftTimur the plnkr does not help because it does not reproduce your error. It load an template which is blocked by the following error: https://docs.angularjs.org/error/$sce/insecurl?p0=https:%2F%2Fwww.matrixandcompany.com%2Ftest%2Findex.html Please create a plnkr that reproduces your problem. – lin Mar 06 '17 at 18:40
  • @Gonzalo.- 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... – SoftTimur Mar 07 '17 at 01:20
  • Please create a pluker. It is hard to help you otherwise. – Latin Warrior Mar 07 '17 at 01:30
  • I've finally made a [plunker](https://plnkr.co/edit/FwC85TGRNyTc5cQFeU8s?p=preview). – SoftTimur Mar 07 '17 at 01:43
  • @SoftTimur 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. – Mike Lunn Mar 07 '17 at 02:06
  • I really don't want to modify `index.html`... @MikeLunn – SoftTimur Mar 07 '17 at 02:31
  • I believe you need something like this https://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 – Gonzalo.- Mar 07 '17 at 02:32
  • I cheated a little i guess, but this works: https://plnkr.co/edit/XE0sess3I2sl6vavq5Wr?p=preview and you dont have to modify the index file, its just code in the `run` function. – Jorg Mar 07 '17 at 08:58

4 Answers4

4

You may use <object> if you prefer.

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

See updated plunker here.

Kursad Gulseven
  • 1,978
  • 1
  • 24
  • 26
  • Great one, this was simple. What are the limitations by using `object` in this case? – lin Mar 07 '17 at 09: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](https://developer.mozilla.org/tr/docs/Web/HTML/Element/object). – Kursad Gulseven Mar 07 '17 at 10:24
3

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**'
    ]);
});
Chris Tarasovs
  • 703
  • 2
  • 21
  • 54
  • @SoftTimur I have updated my answear, I hope this helps – Chris Tarasovs Mar 08 '17 at 11:42
  • Thank you... The scripts I want to preview are random, but I can modify them. They are not necessarily angular project. – SoftTimur Mar 10 '17 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. – Chris Tarasovs Mar 19 '17 at 21:07
  • To be honest, I have not tested your answer, given `` 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... – SoftTimur Mar 21 '17 at 10:10
2

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.

SoftTimur
  • 5,630
  • 38
  • 140
  • 292
2

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

tanmay
  • 7,761
  • 2
  • 19
  • 38