如何在cordova中动态加载CSS [英] How to load a CSS dynamically in cordova

问题描述

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

I'm trying to load a CSS dynamically in cordova over a xhr request.

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

The loading of the CSS is not a Problem, I can load it over xhr and store it to the filesystem over the HTML5 File API. Then I can get a URL this works perfectly.

但是如果我通过javascript在标题中创建一个新的链接元素，就像这样：

But if i create a new link element in the header by javascript, like this:

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

你的样式表没有任何效果，我怎样才能强迫cordova在帐户中使用样式表？

Thy stylesheet don't have any effect, how can I force cordova to take the stylesheet in account?

推荐答案

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

我发现此问题，但遗憾的是建议的答案尚未解决。

I've found this problem and the suggested answers unfortunately haven't resolved it.

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

Loading the CSS data from an external PHP script via an XHR request (as my CSS data is dynamic to each page) I use:

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

我还尝试用新网址替换现有的样式表链接;并添加了日期时间戳以防止缓存，这也无效。

I'd also tried replacing the existing stylesheet link with the new URL; and added datetime stamp to it to prevent caching, which also didn't work.

在Web浏览器中运行良好，我知道数据是通过XHR请求加载的也适用于头部CSS标签，虽然它在Cordova / Phone Gap中不起作用......应用程序只是不用PHP脚本中的CSS更改进行更新。

Works great in the web browser and I know the data is loading through the XHR request and also being applied to the head CSS tag, although it doesn't work in Cordova / Phone Gap... the Apps just don't update with the CSS changes from the PHP script.

* NEW UPDATE *

我终于提出了一个有效的解决方案，它有点像黑客，因为它没有直接解决问题;但是可以解决它并且非常适合我的需求。

I finally came up with a solution that works, it's a bit of a hack as it doesn't directly solve the problem; but works around it and is great for my needs.

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

In PhoneGap / Cordova, I use a pageInit.js type scenario that loads the web page in dynamically from a PHP script, I imagine most people use it in a somewhat similar way.

页面加载后我添加了：

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

然后简单地对动态CSS（PHP）文件发出$ .POST请求，该文件返回所有动态风格数据;然后我加载到样式标签中。

Then simply did a $.POST request to the Dynamic CSS (PHP) file, which returned all the dynamic style data; which I then loaded into a style tag.

这看起来像这样：

$.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（）替换样式。

This loads all the new dynamic style data into the style tag; so the result is an on-page style definition, which you can replace the styles with using .html() at any stage from your external PHP with CSS data.

电话Gap / Cordava识别样式标签更改并相应地更新视觉效果： - ）

Phone Gap / Cordava recognises the style tag changes and updates visuals accordingly :-)

我确信您可以将项目设置为以这种方式加载所有CSS数据而不是正常的头部CSS链接;并且你永远不会在Phone Gap / Cordova上遇到恼人的CSS缓存问题。

I'm sure you could set your project up to load all CSS data in this way instead of the normal head CSS link; and you'd never have that annoying CSS caching issue with Phone Gap / Cordova.

我希望这对某人有用！

这篇关于如何在cordova中动态加载CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！