Make a web page with a folder of external files

ぐ巨炮叔叔 提交于 2019-12-04 01:52:52

You may use <object> if you prefer.

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

See updated plunker here.

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

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.

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!