javascript - 如何在 cordova 中动态加载 CSS

Question

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

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

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

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

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

Answer 1

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

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

通过 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 请求加载，并且还应用于 head CSS 标记，尽管它在 Cordova/Phone Gap 中不起作用......应用程序只是不起作用使用 PHP 脚本中的 CSS 更改进行更新。

* 新更新 *

我终于想出了一个可行的解决方案，但它并没有直接解决问题，所以有点 hack；但可以解决它并且非常适合我的需求。

在 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);

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

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

我确定您可以将您的项目设置为以这种方式加载所有 CSS 数据，而不是正常的 head CSS 链接； Phone Gap/Cordova 永远不会出现烦人的 CSS 缓存问题。

我希望这对某人有用!