Question

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

假设网址1为www.website.com/#1，因此我想加载A.css。同样，网址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

我假设您有一个可用于2个网址的模板。使用javascript加载CSS是一个非常糟糕的做法，因为它很慢并且它给用户带来了糟糕的体验，因为最初没有任何样式。

无论如何，您可以使用追加功能将CSS添加到您的头部。

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

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

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

Answer 4

从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 } ?>

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

4 个答案: