javascript - 将javascript动态插入页面时如何防止 "operation is insecure"警告？

Question

我正在尝试向 jQuery Mobile 页面动态添加元数据 block 、链接和脚本。

脚本包含一个规则，我正在通过 javascript 添加到 CSS 样式表(不幸的是必须是这样)。

看起来像这样:

<script type="text/javascript"
if ('addRule' in sheet) {
sheet.addRule(".splash:before",
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover;" +
  "-o-background-size: cover; background-size: cover;", 0);
} else if ('insertRule' in sheet) {
sheet.insertRule(".splash:before { " +
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover; "+
  "-o-background-size: cover; background-size: cover;" + " }", 0); 
}
</script>

其中x为背景图片url，可在代码块追加到页眉时动态设置。

问题是:
我明白了:

SecurityError: The operation is insecure. [Break On This Error]     
slice.call( docElem.childNodes, 0 )[0].nodeType;

在 Firebug 中报告。

如果我为 x 硬编码一个 URL，它工作正常，所以我假设浏览器提示正在使用 URL 变量。

问题:
知道如何规避这个吗？我需要动态传递 URL。

Answer 1

这几乎总是与同源策略有关的问题。这意味着您正在加载的文件(背景图像、javascript 文件、css 文件等)必须是相同的域、相同的子域、相同的协议(protocol)(http 与 https)和相同的端口。

此外，您是在本地运行还是在服务器上运行？在本地运行时，您会遇到这些问题，因为源在技术上是“file:///”，因此如果您提供指向托管在服务器上的文件的链接，您可能会遇到这些错误。