1

我的 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？

4

4 回答 4

2

您可以为此使用 JavaScript 正则表达式。

非常简单的方法：

    // 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 */
    }

我希望这有帮助！！！

于 2014-07-21T08:30:42.500 回答
1

您可以使用以下 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);
}
于 2014-07-21T08:08:41.787 回答
1

从 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 } ?>
于 2014-07-21T08:14:48.933 回答
1

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

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

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

对于 URL 本身，只需window.location像这样使用 JavaScript：

if (window.location == "#1url") {
    // load the A.css using the append function like above
}
于 2014-07-21T08:10:56.030 回答