带有 CDNResourceHandler 的 Omnifaces 延迟脚本答案

【问题标题】：Omnifaces deferred script with CDNResourceHandler带有 CDNResourceHandler 的 Omnifaces 延迟脚本
【发布时间】：2017-02-10 22:38:43
【问题描述】：

目前我从生成的 Omnifaces CDNResourceHandler 加载 googleAds 脚本

<script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

现在，如果我尝试使用带有 CDN 资源处理程序的 Omnifaces deferredScript 来加载相同的库，那么浏览器会显示消息

访问脚本在 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' 来自来源“https://xxxx”已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

生成的html

<script type="text/javascript">OmniFaces.DeferredScript.add('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');</script>

你能解释一下如何让它工作吗？可以将 deferredScript 和 CDNResourceHandler 实用程序结合起来，但它似乎会产生 CORS 问题。如何解决？

【问题讨论】：

【解决方案1】：

<o:deferredScript> 从未打算用于外部资源。

您的技术问题是因为这个标签explicitly设置了crossorigin="anonymous"属性以支持脚本错误报告（以便可以将JavaScript错误发送到服务器端进行日志记录）。未设置该属性时，您的具体问题将得到解决。

您可以report an issue to OmniFaces guys 并告诉他们当脚本的 src 是外部的时跳过该属性。现在，只需继续使用普通的 <script> 元素。您可以使用#{resource} 让JSF 根据库和名称生成所需的URL。

<script src="#{resource['cdn:adsbygoogle.js']}">

这为在元素上手动设置async="true" 属性留出了空间。

【讨论】：