【问题标题】:How do I add the "crossorigin" tag to a dynamically loaded script?如何将“crossorigin”标签添加到动态加载的脚本中?
【发布时间】:2015-05-08 04:45:54
【问题描述】:

上下文:To quote the Mozilla documentation:

普通脚本标签会将最少的信息传递给 window.onerror 对于未通过标准 CORS 检查的脚本。允许错误 记录使用单独域作为静态媒体的站点, 一些浏览器已经为脚本启用了 crossorigin 属性 使用与标准 img 跨域属性相同的定义。

自从我们将 javascript 移至 CDN 后,我们就意识到我们的脚本一直受到这个问题的困扰。我们在脚本标签中添加了crossorigin 属性,这对于“硬编码”脚本标签效果很好,但是我们动态加载了一些脚本,我不知道如何将crossorigin 标签添加到这些脚本中。

在 Chrome 40 中: 如果我使用 Javascript 动态添加脚本标签,如下所示:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.crossorigin = 'anonymous';
script.src = some_url_on_another_domain;
head.appendChild(script);

我希望将跨域标记添加到插入到我的文档中的脚本标记中。但是,当我在开发者工具中检查脚本标签时,它显然不存在。 (并且我可以验证在请求脚本时没有在请求标头中设置 origin 标头。)

目前,我转而使用这些跨域脚本的 ajax 请求,因此有一些解决方法,但现在我很好奇是否可以在动态脚本标签上添加跨域标签。

【问题讨论】:

    标签: javascript ajax jsonp cors


    【解决方案1】:

    好吧,我发现了我的问题。

    这个:

    script.crossorigin = 'anonymous';
    

    应该是这样的:

    script.crossOrigin = 'anonymous';
    

    注意大写的“O”。该属性在 HTML 中不大写,但在 JS 界面中大写。很高兴知道!

    尴尬,但我决定让我的错误永垂不朽,而不是删除问题,以防其他人犯同样的问题。

    【讨论】:

    • script.setAttribute('crossorigin', 'anonymous');script.setAttribute('crossOrigin', 'anonymous'); 也有效
    • 很棒的发现!愚蠢的区分大小写的javascript。
    • 我也中了这个陷阱。我应该参考HTMLScriptElement 的文档而不是<script> 的文档。
    猜你喜欢
    • 1970-01-01
    • 2020-10-04
    • 2016-12-14
    • 2016-07-18
    • 1970-01-01
    • 2022-11-23
    • 2020-12-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多