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