用javascript加载不同的CSS样式表

我需要使用JavaScript来加载一个不同的样式表基于正在传递的URLvariables。

情景是这样的：我们需要维护一个具有一个CSS样式表的移动网站，以及一个不同的样式表，当它通过在iOS应用程序中加载的web视图访问时，将用于样式化相同的页面。

如果你看www.blog.meetcody.com，你会发现我们已经在使用媒体查询和响应式网页devise了。 这对我们来说是不够的原因是因为媒体查询无法检测到该页面是通过本地应用程序中的webview加载还是移动Safari浏览器。 我们需要分别处理这两种情况。 博客是托pipe的WordPress博客，我们正在通过我们的iOS应用程序中的JSON API访问。

我们处理这个的方式如下：当网页通过我们的iOS应用程序加载时，我们在URL的末尾添加一个variables“/？app = true”。 我想要做的是检查URL是否包含此string，如果是，请使用其他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> 

我遇到的问题是，当app = true是URL的一部分时，上面的代码实际上并没有加载appstyle.css样式表。

如果你看看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2你可以看到我正在testing这个设置背景：黑色body {}标记

 body { background: black; } 

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

  body { background: #F2F0EB; } 

当然，我们想做的不仅仅是改变背景颜色，但我只是把它作为一个例子。

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

Answer 1

在使用内联脚本时，不应该尝试closures文档。 document.close只有在您将document.write写入iframe，框架或新窗口时才需要

另外我build议你testinglocation.search而不是href，因为那是你放置国旗的地方。

请尝试

 <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张以上表单之一中设置的内容，或者更好：在服务器上testing查询string，或者将查询string设置为app = yes ，在会话或类似的东西中设置一些东西，并使用它来在服务器上包含正确的CSS，而不是依靠JS

PS：你的身体标记在你的主页上有家和博客的类。 我build议你看看上面提到的样式表，看看这些类的颜色是什么。

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

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

Answer 2

你可以使用appendChild（）来添加一个CSS样式表，如下所示：

  var header = $.getElementsByTagName('head')[0]; var styleSheet = $.createElement('link'); styleSheet.rel = 'stylesheet'; styleSheet.type = 'text/css'; styleSheet.href = 'style.css'; // name of your css file styleSheet.media = 'all'; header.appendChild(styleSheet); 

当然，你可以改变这个例子，以适应不同的CSS文件名取决于当前的URL通过做这样的事情：

  styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';