1

我需要使用 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 {
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 的直接链接?非常感谢帮助。和圣诞快乐!

4

2 回答 2

4

您可以使用 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';
于 2012-12-25T06:04:08.890 回答
1

使用内联脚本时,永远不要尝试关闭文档。仅当您 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:你的body标签在你的主页上有home和blog的类。我建议您查看上面提到的样式表,看看这些类的颜色是什么。

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' />
于 2012-12-25T06:10:02.717 回答