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

Question

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

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

如果您查看 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 {
        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';