AngularJS $ http检索外部javascript文件

小编典典

AngularJS $ http检索外部javascript文件

angularjs

我有一个第三方表单解决方案，可以通过导入javascript文件将其嵌入到我的网站中。嵌入脚本的说明实际上与“复制并粘贴以下内容”类似：

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script>

看一下实际的javascript文件，它基本上只是一组

document.write("            <input id=\"SubmitButton2070990\""+"\n");
document.write("            class=\"fsSubmitButton\""+"\n");
document.write("            style=\"display: block;\""+"\n");
document.write("            type=\"submit\""+"\n");
document.write("            value=\"Submit Form\" />"+"\n");

现在，我尝试了几件事…我有一个带有模板URL的指令，该指令命中包含该脚本的简单部分。看起来像这样：

指示：

angular.directive('feedbackForm',function() {
return {
            restrict: 'A',
            templateUrl: '/static/form.html'
        };
)

form.html

<div>
<h2>testing form</h2>

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script></div>
</div>

发生的一切只是呈现了html，但脚本的内容却没有…

我尝试了一个$http请求，该请求如上所述从该第三方的链接获取脚本的内容，并尝试执行该请求。就像是

$http.get('https://<form.company.com>/<form_name>.js')
    .then(function(response){
        var formScript = new Function(response.data);
        formScript();
    })

但是，我的浏览器中的“网络”标签显示，当请求以200响应代码发送时，响应没有内容，为0字节，依此类推。

基本上，我不知道自己在做什么错…

我实际上有可能这样做吗？我遇到了一些跨域脚本类型的事情吗？

阅读 212

2020-07-04

共1个答案

小编典典

这就是应该在模板中对待脚本的方式。

app.directive('directive', function () {
    return {
        template: '<script src="404.js"><\/script>' +
          '<script>console.log("inline script");<\/script>',
        link: function (element, attrs) {
            var scripts = element.find('script');
            angular.forEach(scripts, function (script) {
                script = angular.element(script);
                var type = script.attr('type');
                var src = script.attr('src');

                if (type && !type.match(/^(?:text|application)\/javascript$/i))
                    return;

                var scriptFixed = angular.element('<script>');
                if (src) {
                    scriptFixed.attr('src', src);
                } else {
                    scriptFixed.text(script.text());
                }
                script.replaceWith(scriptFixed);                    
            });
        }
    };
});

当使用$ http请求脚本时，您显然会遇到XSS问题。

2020-07-04