使用javascript加载不同的CSS样式表 [英] Load different CSS stylesheet with javascript

问题描述

我需要使用javascript来根据正在传递的网址变量加载不同的样式表。

I need to use javascript to load a different stylesheet based on a URL variable that is being passed.

情况是这样的：我们需要维护一个移动网站，其中包含一个CSS样式表和一个不同的样式表，用于在通过

The scenario is this: We need to maintain a mobile website with one CSS stylesheet, and a different stylesheet that will be used to style the same page when it is accessed via a web-view loaded in an iOS app.

如果您查看www.blog.meetcody.com，您会看到我们已经在使用媒体查询和回应式网页设计。这对我们来说不够的原因是因为媒体查询无法检测到页面是通过本地应用程序中的webview还是移动safari加载。我们需要分别处理这两种情况。这个博客是一个托管的wordpress博客，我们通过JSON API在我们的iOS应用程序中访问。

If you look at www.blog.meetcody.com you'll see that we're already using media queries and responsive webdesign. The reason that this is insufficient for us is because media queries cannot detect if the page is being loaded via a webview in a native app vs. a mobile safari. We need to handle these two cases separately. The blog is a hosted wordpress blog, that we are accessing via a JSON API in our iOS app.

我们的处理方式如下：当网页通过我们的iOS应用程序加载，我们在URL/？app = true的末尾添加一个变量。我想做的是检查网址是否包含此字符串，如果是，请使用其他网络视图。

The way we are handling this is as follows: When the webpage is loaded via our iOS app, we append a variable to the end of the URL "/?app=true". What I'd like to do is check to see if the URL contains this string, and if so, use a different webview.

我尝试使用以下代码：

    <script language="javascript" type="text/javascript">
    if(window.location.href.indexOf('/?app=true') > -1) {

        document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />");
    }
    document.close(); 
</script>

我遇到的问题是，上面的代码实际上并没有加载appstyle.css stylesheet when？app = true是网址的一部分。

The issue that I'm having is that the above code doesn't actually load the appstyle.css stylesheet when ?app=true is part of the URL.

如果您查看 http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2 您可以看到我正在测试此通过设置背景：身体中的黑色{}标签

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

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

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

当然，我们要做的不仅仅是改变背景颜色，我只是显示这个例子。

Of course, we want to do more than just change the background color, but I'm just showing this as an example.

有更好的方法来做到这一点，或者我的代码有什么问题吗？也许我不能使用直接链接到appstyle.css在javascipt中的href？帮助非常感激。和圣诞快乐！

Is there a better way to do this, or is there something wrong with my code? Perhaps I cannot use a direct link to appstyle.css an href in javascipt? Help much appreciated. And Merry Christmas!

推荐答案

在使用内联脚本时，不应尝试关闭文档。 document.close只有在document.write到iframe，框架或新窗口时才需要

You should never try to close the document when you use inline script. document.close is only needed if you document.write to an iframe, frame or new window

此外，我建议你测试location.search而不是href，因为这是

Also I suggest you test the location.search rather than the href since that is where you placed the flag.

请尝试

<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>

并且可能将脚本放在其他样式表之后，如果要覆盖其中一个10+张在您的网站，或更好：测试服务器上的查询字符串，或您将查询字符串设置为app = yes，设置在会话或类似的东西，并使用包括正确的CSS在服务器，而不是依赖JS

and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS

PS：你的body标签在你的首页上有主页和博客类。我建议你看看上面提到的样式表，看看那些类的颜色是什么。

PS: Your body tag has the classes of home and blog on your homepage. I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.

PPS：我没有看到任何媒体检测

PPS: I do not see any media detection here

<link rel='stylesheet' id='standard-activity-tabs-css'  href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css'  href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css'  href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css'  href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css'  href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css'  href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css'  href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />

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