如何在cordova中dynamic加载CSS
我试图通过xhr请求在cordovadynamic加载一个CSS。
加载CSS不是一个问题，我可以通过xhr加载它，并通过HTML5 File API将其存储到文件系统。 那么我可以得到一个完美的url。
但是，如果我在JavaScript中创build一个新的链接元素，像这样：
<link rel="stylesheet" type="text/css" id="skin" href="cdvfile://localhost/temporary/mydomin.tdl/skin.css"> 你的样式表没有任何影响，我怎么能强迫cordova把样式表考虑在内？
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
*更新：我有一个工作解决scheme，我将它添加到我的答案下面*
我发现这个问题，不幸的是build议的答案没有解决它。
通过XHR请求从外部PHP脚本加载CSS数据（因为我的CSS数据对每个页面都是dynamic的）我使用：
var storeCSSURL = "https://www.example.com/dynamicCSS.php?storeID=x"; $('head').append('<link rel="stylesheet" href="' + storeCSSURL + '" type="text/css" />');
我也尝试用新的URLreplace现有的样式表链接; 并添加date时间戳来防止caching，这也不起作用。
在Web浏览器中工作良好，我知道数据通过XHR请求加载，也被应用到头CSS标签，虽然它不能在Cordova / Phone Gap中工作…应用程序只是不更新来自PHP脚本的CSS更改。
*新的更新*
我终于想出了一个有效的解决scheme，这是一个黑客，因为它不直接解决问题; 但围绕它工作，是我的需要很大。
在PhoneGap / Cordova中，我使用了一个pageInit.jstypes的场景，它从PHP脚本中dynamic地加载网页，我想大多数人会以一种类似的方式来使用它。
页面加载后，我补充道：
$("body").append('<style id="dynamicStyles"></style>');
然后简单地对dynamicCSS（PHP）文件做一个$ .POST请求，该文件返回所有的dynamic样式数据; 然后我加载到一个样式标签。
这看起来像这样：
$.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);
这将所有新的dynamic样式数据加载到样式标签中; 所以结果是一个页面样式的定义，您可以在任何阶段使用.html（）从外部PHP与CSS数据replace样式。
手机差距/ Cordava识别风格标签的变化，并相应地更新视觉效果:-)
我相信你可以设置你的项目，以这种方式加载所有的CSS数据，而不是正常的头部CSS链接; 你永远不会有电话差距/ Cordova的烦人的CSScaching问题。
我希望这对某个人有用！
$(document).ready(function () { $("a").click(function () { $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); }); });