AngularJS $ HTTP来获取外部JavaScript文件 [英] AngularJS $http to retrieve external javascript file

问题描述

我有一个第三方的形式解决方案，我可以通过导入JavaScript文件中嵌入我的网站。嵌入脚本的指导实际上是沿着线
复制和粘贴这样的：

I've got a 3rd party form solution that I can embed in my site by importing a javascript file. The instructions for embedding the script is actually along the lines of "Copy and paste this:"

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

考虑在实际的JavaScript文件一看，它基本上只是一组

Taking a look in the actual javascript file, it's basically just a set of

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的指令。
它看起来是这样的：

Now, I've tried a couple of things... I've got a directive with a template URL that hits a simple partial that has that script within. It looks like this:

指令：

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呈现，但剧本的内容不是...

All that happens is that the html is rendered, but the contents of the script aren't...

我已经试过了来自第三方的链接获取脚本的内容之上，并试图执行它 $ HTTP 请求。
类似

I've tried a $http request that gets the contents of the script from that 3rd party's link as above, and tries to execute it. Something like

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

不过，在我的浏览器通过网络选项卡中显示，虽然该请求与响应200 code发送的响应没有内容，是0字节，等等等等。

But, the network tab in my browser shows that while the request is sent with a 200 response code, the response has no contents, is 0 bytes, etc etc.

基本上，我想不通，我做错了什么......

Basically, I can't figure out what I'm doing wrong...

它实际上是我能够做到这一点？有没有办法，我对运行了一些跨域脚本类型的事情？

Is it actually possible for me to do this? Is there some cross domain scripting type thing that I'm running up against?

推荐答案

这是如何脚本应该在模板中进行治疗。

This is how scripts should be treated in templates.

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

您会明显有XSS问题与$ HTTP请求脚本时。

You will obviously have XSS issues when requesting the scripts with $http.

这篇关于AngularJS $ HTTP来获取外部JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！