[英]AngularJS $http to retrieve external javascript file
我有一个第三方表单解决方案,可以通过导入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问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.