如何在cordova中动态加载CSS

我正在尝试通过 xhr 请求在 cordova 中动态加载 CSS。

CSS 的加载不是问题，我可以通过 xhr 加载它并通过 HTML5 文件 API 将其存储到文件系统。然后我就可以得到一个完美的 URL。

但是如果我通过 javascript 在标头中创建一个新的链接元素，如下所示：

<link rel="stylesheet" type="text/css" id="skin" href="cdvfile://localhost/temporary/mydomin.tdl/skin.css">

你的样式表没有任何效果，我如何强制cordova考虑样式表？

*更新：我有一个可行的解决方案，我会将其添加到下面的答案中*

我发现了这个问题，不幸的是建议的答案没有解决它。

通过 XHR 请求从外部 PHP 脚本加载 CSS 数据（因为我的 CSS 数据对于每个页面都是动态的），我使用：

var storeCSSURL = "https://www.example.com/dynamicCSS.php?storeID=x";
$('head').append('<link rel="stylesheet" href="' + storeCSSURL + '" type="text/css" />');

我还尝试用新的 URL 替换现有的样式表链接；并向其添加日期时间戳以防止缓存，但这也不起作用。

在网络浏览器中工作得很好，我知道数据是通过 XHR 请求加载的，并且也应用于 head CSS 标签，尽管它在 Cordova / Phone Gap 中不起作用......应用程序只是不更新CSS 源自 PHP 脚本。

* 新更新 *

我终于想出了一个可行的解决方案，它有点像黑客，因为它不能直接解决问题；但可以解决它并且非常适合我的需求。

在 PhoneGap / Cordova 中，我使用 pageInit.js 类型场景从 PHP 脚本动态加载网页，我想大多数人都以某种类似的方式使用它。

页面加载后我添加了：

$("body").append('<style id="dynamicStyles"></style>');

然后简单地对动态 CSS (PHP) 文件执行 $.POST 请求，该文件返回所有动态样式数据；然后我将其加载到样式标签中。

这看起来像这样：

$.post("https://www.example.com/controller.php", { url: url }, function (data, status) {
    if (status == "success") {
        $("body").html(data);
        // Loads the main page content into the body tag
        $("body").append('<style id="dynamicStyles"></style>');
        // Appends the main page content with a style tag
        $.post("https://www.example.com/dynamicCSS.php", { storeID: storeID }, function (data, status) {
            if (status == "success") {
                $("#dynamicStyles").html(data);
                // Loads CSS data from external PHP script dynamically
                // then places it into the new style tag.
            }
        });
    }
});

CSS 从这一行更新：

$("#dynamicStyles").html(data);

这会将所有新的动态样式数据加载到样式标签中；因此，结果是页面上的样式定义，您可以在任何阶段使用 CSS 数据从外部 PHP 中使用 .html() 替换样式。

Phonegap / Cordova 可以识别样式标签的更改并相应地更新视觉效果:-)

我确信您可以将您的项目设置为以这种方式加载所有 CSS 数据，而不是普通的 head CSS 链接；使用 Phone Gap / Cordova 时，您永远不会遇到烦人的 CSS 缓存问题。

我希望这对某人有用！