当前位置: 首页 > 面试题库 >

AngularJS $ http检索外部javascript文件

戚良弼
2023-03-14
问题内容

我有一个第三方表单解决方案,可以通过导入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字节,依此类推。

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

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


问题答案:

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

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问题。



 类似资料:
  • 我目前正在创建一个基于此小提琴的动态下拉列表 除了我试图调用JSON文件之外,我一直在跟进。我的代码如下: ]; 范围metro可以工作,但是当连接到JSON文件时,其余的就不能工作了。我假设它会工作,因为它实际上是相同的结构。我做错了什么? [编辑] 正如你们中的一些人所回答的那样,在我进行上述操作之前,我最初尝试了这种http注入: 这不起作用,所以我试了另一种方法。所以我假设它与JSON赋值

  • 此angularJS文件不将表达式的值显示为“全名:John Doe”;相反,它显示“全名:{{firstName”“lastName}”。我可能错过了什么? AngularJS文件结束 下面是它的外部javaScript文件:personController。js

  • 问题内容: 我有一个三层应用程序,我必须进行修改。我对Java的整个Web知识都是陌生的,所以请多多包涵。 当前,应用程序具有UI,应用程序和数据库层,但是我试图使用依赖注入将SQL数据库与数据库层分离。 因此,在某些时候,我不需要在应用程序中使用SQL Server凭据,因为数据库后端可能是纯文本。 关键是当前的SQL凭据作为init参数存储在web.xml文件中。这些是通过servlet代码获

  • 问题内容: 我目前正在阅读Adam Freeman的“ Pro AngularJS”。在阅读这些示例时,他让读者使用Angular(当然)与Deployed服务器资源一起创建了运动商店应用。部署资源已设置为返回要填充到模型中的JSON数据。我正在使用NodeJS运行服务器。当前在端口5000()上设置。部署的资源正在端口5500()上运行。当点击已部署时,响应如下: 我正在尝试通过使用来检索此数据

  • 问题内容: 我有一个id为“ content- area”的div,当用户在该div之外单击时,我想提醒他们他们在该div之外单击的事实。我将如何使用JavaScript解决此问题? 问题答案: 用纯Javascript 看看这个小提琴,看看这就是你所追求的!

  • `我试图用laravel从外部api检索一些数据:这是我的控制器 使用Illumbite\Http\请求;使用Illumb\Support\Facades\Http;