使用javascript加载不同的CSS样式表

Question

我需要使用javascript根据传递的URL变量加载不同的样式表。

场景是这样的：我们需要维护一个移动网站，其中包含一个CSS样式表，以及一个不同的样式表，当通过iOS应用程序中加载的Web视图访问该样式表时，该样式表将用于设置同一页面的样式。

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

我们处理此问题的方式如下：当通过我们的iOS应用程序加载网页时，我们将一个变量附加到URL“/？app = true”的末尾。 我想要做的是检查URL是否包含此字符串，如果是，请使用不同的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，您可以看到我通过设置背景来测试它： 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;
   }

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

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

Answer 1

您可以使用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);

当然，您可以通过执行以下操作来更改此示例以根据当前URL容纳不同的css文件名：

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

Answer 2

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

另外我建议你测试location.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多张表中设置的内容，或者更好：在服务器上测试查询字符串，或者将查询字符串设置为app = yes ，在会话中设置一些东西或类似的东西，并使用它在服务器上包含正确的CSS而不是依赖JS

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

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