使用从URLvariables读取的JavaScript加载不同的CSS样式表
我试图在我的WordPress博客上有两个不同的样式表，以便在通过网页访问页面时使用一个样式表，而在通过iOS应用程序访问博客内容时使用另一个样式表。 现在，我们正在追加？app = true从我们的iOS应用程序的URL请求，希望在我们的博客，我们可以search这个string，并加载不同的样式表。 我们正在使用JSON API插件，以便我们的iOS应用程序可以以编程方式拉我们的博客文章，并在iOS应用程序的Web视图中显示它们。
在我的wordpress博客中，我使用的是在URL中查找？app = true的JavaScript，如果是，请加载不同的样式表。
<script language="javascript" type="text/javascript"> var currentLocation = window.location.href; if(currentLocation.indexOf('/?app=true') > -1) { document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />"); } </script> 你可以看一下http://blog.meetcody.com并查看页面源代码。 你会看到这个代码片段之间的标签。
我遇到的问题是上面的代码实际上并没有加载appstyle.css样式表。 如果你看看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2你可以看到我正在testing这个设置背景：黑色body {}标记
body { background: black; }
而在style.css中http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2身体背景色是＃F2F0EB; 在body {}标记中
body { background: #F2F0EB; }
我怎样才能传递一个URLvariables，如？app = true，当传递，我加载一个不同的样式表？
我相信解决您的问题的最佳方法是采用响应式网页devise技术。 这些允许您适当地解决不同的分辨率。
基本的CSS看起来像下面这样…
@media screen and (min-width: 480px) { // CSS for iPhone } @media screen and (min-width: 768px) { // CSS for iPad } @media screen and (min-width: 900x) { // CSS for desktop }
外卖是你不需要为不同的平台加载不同的样式表。 你将有一个样式表在任何情况下都能正常工作。 它甚至可以用于没有专门针对的平台。
build立新的波士顿环球网站的团队是我对RWD的介绍。 这是他们做了什么的细分 。
我在网站上用Firebug控制台试了一些东西。 所以，实际工作是以下代码：
<script type="text/javascript"> if(window.location.href.indexOf('/?app=true') > -1) { var fileref=document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", "http://blog.meetcody.com/wp-content/themes/standard/appstyle.css"); document.getElementsByTagName("head")[0].appendChild(fileref); } </script>
（此代码是从dynamic加载外部JavaScript或CSS文件改编的）。
既然你正在加载其他样式表，我猜你会覆盖他们的规则，所以你必须在所有其他样式表之后加载这个样式表。 所以把这段代码放在文档的最后或window.onload事件中。
你也可以嗅出用户代理string。 这样你就不必传递任何东西。 在大多数情况下，我不会推荐它通常，但有这样一个特定的情况下，你可以安全地做到这一点，没有吨的代码。
// Define what "webview" is var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent); // See if this user is coming from it if (is_uiwebview = true) { // Your code to make the <link> with a proper href // Raul's would work perfectly };
再次，正如其他人所说，确保它加载的东西在纯网页样式表之后。 也不完全确定= true是必要的。