使用从URL变量读取的JavaScript加载不同的CSS样式表

Question

我试图在我的wordpress博客上有两个不同的样式表，因此当通过网络访问页面时使用一个样式表，而当通过我们的iOS应用程序访问博客内容时使用其他样式表。 现在我们将来自iOS应用程序的URL请求附加？app = true，希望在我们的博客中我们可以搜索此字符串并加载不同的样式表。 我们正在使用JSON API插件，以便我们的iOS应用程序可以编程方式提取我们的博客帖子并在iOS应用程序的Web视图中显示它们。

在我的wordpress博客中，我使用的是在URL中查找？app = true的JavaScript，如果是这样，请加载不同的样式表。

<script language="javascript" type="text/javascript">
    var currentLocation = window.location.href; 
    if(currentLocation.indexOf('/?app=true') > -1) {        
        document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
    }
</script>

您可以查看http://blog.meetcody.com并查看页面源代码。 您将在标记之间看到此代码段。

我遇到的问题是上面的代码实际上没有加载appstyle.css样式表。 如果您查看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2，您可以看到我通过设置背景来测试它： body {}标签

body {
background: black;
}

然而，在http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2的style.css中，正文背景颜色为＃F2F0EB; 在body {}标签中

body {
    background: #F2F0EB;
}

如何传递URL变量，例如？app = true，当传递时，我加载了不同的样式表？

Answer 1

我认为解决问题的最佳方法是采用响应式Web设计技术。 这些允许您适当地处理不同的分辨率。

基本的CSS看起来像以下......

@media screen and (min-width: 480px) {
    // CSS for iPhone
}

@media screen and (min-width: 768px) {
    // CSS for iPad
}

@media screen and (min-width: 900x) {
    // CSS for desktop
}

外卖是你不需要为不同的平台加载不同的样式表。 您将拥有一个适用于所有情况的样式表。 它甚至可以用于您没有专门针对的平台。

建立新的Boston Globe网站的团队是我对RWD的介绍。 这是他们所做的细分 。

Answer 2

我在你的网站上尝试了一些Firebug控制台。 那么，实际工作的是以下代码：

<script type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "http://blog.meetcody.com/wp-content/themes/standard/appstyle.css");
    document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>

（此代码改编自动态加载外部JavaScript或CSS文件 ）。

由于您正在加载其他样式表，我猜您会覆盖它们的规则，因此您必须在所有其他样式表之后加载此样式表。 因此，请将此代码放在文档末尾或window.onload事件中。

Answer 3

您还可以嗅出用户代理字符串。 这样你就不必传递任何东西。 在大多数情况下，我不会经常推荐它，但有了这样一个特定的情况，你可以安全地做到这一点，而无需大量的代码。

// Define what "webview" is
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);

// See if this user is coming from it
if (is_uiwebview = true) {
// Your code to make the <link> with a proper href
// Raul's would work perfectly
};

再一次，正如其他人所说的那样，确保它在你的网络样式表之后加载东西。 也不完全确定= true是否需要。