如何在cordova中动态加载CSS

Question

我正试图在xhr请求中动态加载CSS。

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

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

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

你的样式表没有任何效果，我怎么能强迫cordova拿出样式表呢？

Answer 1

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

Answer 2

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

我发现这个问题并且遗憾的是建议的答案没有解决它。

通过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替换现有的样式表链接; 并添加日期时间戳以防止缓存，这也无法正常工作。

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

*新更新*

我终于提出了一个有效的解决方案，它有点像黑客，因为它没有直接解决问题; 但要解决它并且对我的需求很有帮助。

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

页面加载后我添加了：

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

然后只需对Dynamic 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);

这会将所有新的动态样式数据加载到样式标记中; 所以结果是一个页面样式定义，您可以在外部PHP与CSS数据的任何阶段使用.html（）替换样式。

Phone Gap / Cordava识别样式标签更改并相应更新视觉效果:-)

我相信你可以设置你的项目以这种方式加载所有CSS数据而不是正常的头部CSS链接; 你永远不会有Phone Gap / Cordova那令人讨厌的CSS缓存问题。

我希望这对某人有用！

Answer 3

$(document).ready(function () {

    $("a").click(function () {

        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

    });

});