我需要使用JavaScript加载基于正在传递一个URL变量不同的样式表。
该方案是这样的：我们需要保持一个移动网站与一个CSS样式表，和不同的样式表将被使用时，通过在iOS应用程序加载的网页视图访问样式相同的页面。
如果你看一下www.blog.meetcody.com，你会看到我们已经使用媒体查询和响应网页设计。 究其原因，这是不够的我们是因为如果页面被通过的WebView加载本机应用程序与移动Safari浏览器媒体查询无法察觉。 我们需要分别处理这两种情况。 该博客是一种托管的WordPress博客，我们通过我们的iOS应用中JSON API访问。
我们正在处理这个问题的方法是：当网页是通过我们的iOS应用下载，我们一个变量追加到URL的末尾“/应用程序=真的吗？”。 我想要做的是检查是否URL包含这个字符串，如果是这样，使用不同的网页流量。
我试图用下面的代码来做到这一点：
<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>
说我遇到的问题是，上面的代码实际上并没有加载appstyle.css样式表时？应用=真正的是URL的一部分。
如果你看一看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2你可以看到，我被设置背景测试这样的：在黑身体{}标签
body {
background: black;
}
然而，在style.css中http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2身体背景色为＃F2F0EB; 在主体{}标签
body {
background: #F2F0EB;
}
当然，我们要做的不仅仅是改变背景颜色，但我只是表示这是一个例子。
有没有更好的方式来做到这一点，或者是有什么错我的代码？ 也许我不能用一个直接链接到appstyle.css在javascipt的一个href？ 帮助非常感谢。 圣诞快乐！
你不应该尝试当您使用内联脚本关闭文档。 如果文件撰写的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+表的一个设置，或者更好的测试服务器上的查询字符串，或者你的查询字符串设定为应用程序= 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' />
您可以通过使用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';
