如何基于URL或客户端加载CSS文件？

Question

我的Sencha touch应用程序中有两个CSS文件。我们称它们为A.css和B.css。基于URL，我希望应用程序加载不同的CSS。

假设URL 1是www.website.com/#1，为此，我要加载A.css。同样，URL 2是www.website.com/#2，为此，我想加载B.css

是否可以根据URL动态加载CSS？

Answer 1

您可以为此使用JavaScript Regex。

非常简单的方法：

    // For www.website.com/#1
    if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

    // For www.website.com/#2
    if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

希望对您有帮助！

Answer 2

您可以使用以下JavaScript代码来根据需要动态加载CSS：

if (window.location == "http://www.website.com/#1") {
     LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
     LoadCSS("B.css")
}

function LoadCSS(filename) {
     var fileref = document.createElement("link");
     fileref.setAttribute("rel", "stylesheet");
     fileref.setAttribute("type", "text/css");
     fileref.setAttribute("href", filename);
}

Answer 3

从URL获取主题标签值，然后根据值更改CSS的链接。

要获取主题标签值：

$url = "www.website.com/#1";
$params = parse_url($url);

$value = $params['fragment'];

这将为您提供标签值，然后取决于标题中的值链接CSS文件：

<?php if ($value == 1) { ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>

Answer 4

我假设您有一个模板可用于2个URL。使用JavaScript加载CSS是一种非常糟糕的做法，因为它速度很慢，并且由于最初未设置任何样式，因此给用户带来了不好的体验。

无论如何，您都可以使用append函数将CSS添加到head标签。

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

对于URL本身，只需使用JavaScript window.location，如下所示：

if (window.location == "#1url") {
    // load the A.css using the append function like above
}