使用从URL变量读取的JavaScript加载不同的CSS样式表 [英] Load different CSS stylesheet using JavaScript reading from URL variable

问题描述

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

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

 <脚本language =javascripttype =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 你可以看到我正在通过在背景中设置背景：black {}标记来测试

  body {
 background：black; 
} 
  

在style.css中 http://blog.meetcody.com/wp-content/themes/standard/style。 css？ver = 3.4.2 身体背景色是＃F2F0EB;在body {}标记中

  body {
 background：＃F2F0EB; 
} 
  

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

解决方案

您也可以嗅出用户代理字符串。这样你就不必传递任何东西。在大多数情况下，我不会推荐它，但通过这种特殊情况，您可以安全地做到这一点，而不需要大量代码。

  //定义什么webview是
 var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent）; 
 
 //查看这个用户是否来自它
 if（is_uiwebview = true）{
 //你的代码使< link>用适当的href 
 //劳尔的完美工作
}; 
  

同样，正如其他人所说的，确保它在您的纯网页样式表之后加载内容。
也不完全确定需要 = true 。

I am trying to have two different stylesheets on my wordpress blog, so that one stylesheet is used when the page is accessed via the web, and the other stylesheet is used when the blog content is accessed via our iOS app. Right now we are appending ?app=true to URL requests from our iOS app in hopes that in our blog we could search for this string and load a different stylesheet. We are using a JSON API plugin so that our iOS app can programmatically pull our blog posts and display them in a web view in the iOS App.

In my wordpress blog I am using JavaScript that looks for ?app=true in the URL, and if so, load a different stylesheet.

<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>

You can take a look at http://blog.meetcody.com and view the page source. You will see this code snippet in-between the tags.

The issue that I'm having is that the above code doesn't actually load the appstyle.css stylesheet. If you take a look at http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2 you can see that I'm testing this by setting the background: black in the body {} tag

body {
background: black;
}

Whereas, in style.css at http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 the body background color is #F2F0EB; in the body {} tag

body {
    background: #F2F0EB;
}

How can I pass a URL variable such as ?app=true and when that is passed, I load a different stylesheet?

解决方案

You could also sniff out the user-agent string. This way you wouldn't have to pass anything. In most cases I wouldn't recommend it usually but with such a specific case you can safely do it without a ton of code.

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

Again, as everyone else said make sure it loads things after your web-only stylesheet. Also not entirely sure the = true is needed.

这篇关于使用从URL变量读取的JavaScript加载不同的CSS样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！