如何在cordova中动态加载CSS

Posted 2023-03-12

【中文标题】如何在cordova中动态加载CSS

【英文标题】：How to load a CSS dynamically in cordova

【发布时间】：2014-04-26 09:57:48

【问题描述】：

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

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

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

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

你的样式表没有任何效果，我如何强制科尔多瓦考虑样式表？

【参考方案1】：

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

【讨论】：

这正是我正在做的，但我没有任何效果。该元素出现在 dom 树中，但元素未使用新样式进行更新。在普通浏览器中它可以完美运行，但 Cordova 不行。

@patrick 我知道它有点旧，但我添加了一个示例来解决缓存问题

【参考方案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 替换现有的样式表链接；并为其添加了日期时间戳以防止缓存，这也不起作用。

在网络浏览器中运行良好，我知道数据正在通过 XHR 请求加载，并且也被应用于头部 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 数据，而不是使用普通的头部 CSS 链接；并且您永远不会遇到 Phone Gap / Cordova 的那种烦人的 CSS 缓存问题。

我希望这对某人有用！

【参考方案3】：

$(document).ready(function () 

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

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

    );

);

【讨论】：

这个答案可以用一些解释来帮助其他有类似问题的用户理解你的解决方案。