javascript - 在 Firefox 中添加动态样式表时可以触发 jQuery load 事件吗？

Question

我正在 jQuery 中运行以下代码来动态加载样式表。其目的是允许用户加载自定义样式表并更改 JavaScript 小部件的外观:

this.loadStyleSheet = function(url){
    $("<link rel='stylesheet' type='text/css' />").attr("href", url).appendTo("head");
}

屏幕瞬间出现跳动，因为只有在加载动态样式表后才会将正确的样式应用于小部件。为了解决这个问题，我需要知道动态样式表实际上何时完成加载。

虽然这个问题has been discussed before ，这些解决方案都不适用于我的情况:

1. .load() 仅在 IE 中触发，在 Firefox 中无效。需要跨浏览器解决方案。顺便说一句，.ready() 在样式表完成加载之前触发。
2. .get() 仅适用于同一域。我的例子中的样式表可能来自任何给定的域。
3. 无法通过 setTimeout 查询要更改的某些 CSS 属性。用户可以指向任何自定义样式表，并且无法知道她的 CSS 文件将包含什么内容。
4. 通过 setTimeout 加载样式表后等待恒定时间显然是一个糟糕的解决方案。无法提前知道样式表加载需要多长时间(如果会加载的话)。

关于这个问题有什么新的想法吗？非常感谢您的帮助。

Answer 1

如果其他人需要答案，请扩展我上面的评论:

你的 JavaScript 看起来像这样:

var style = $('<style type="text/css">');
$(document).append(style);
style.load('/fetchstyle.php', { url: "http://somesite.com/style.css" }, function() {
    // The styles are loaded
});

fetchstyle.php 脚本如下所示:

<?php
echo file_get_contents($_GET['url']);

未经测试，但这个概念应该可行。