[英]Load different CSS stylesheet with javascript
I need to use javascript to load a different stylesheet based on a URL variable that is being passed. 我需要使用javascript根据传递的URL变量加载不同的样式表。
The scenario is this: We need to maintain a mobile website with one CSS stylesheet, and a different stylesheet that will be used to style the same page when it is accessed via a web-view loaded in an iOS app. 场景是这样的:我们需要维护一个移动网站,其中包含一个CSS样式表,以及一个不同的样式表,当通过iOS应用程序中加载的Web视图访问该样式表时,该样式表将用于设置同一页面的样式。
If you look at www.blog.meetcody.com you'll see that we're already using media queries and responsive webdesign. 如果您查看www.blog.meetcody.com,您会发现我们已经在使用媒体查询和响应式网页设计。 The reason that this is insufficient for us is because media queries cannot detect if the page is being loaded via a webview in a native app vs. a mobile safari.
这对我们来说不充分的原因是因为媒体查询无法检测是否通过本机应用程序中的webview加载页面而不是移动Safari。 We need to handle these two cases separately.
我们需要分别处理这两种情况。 The blog is a hosted wordpress blog, that we are accessing via a JSON API in our iOS app.
该博客是一个托管的wordpress博客,我们通过iOS应用程序中的JSON API访问。
The way we are handling this is as follows: When the webpage is loaded via our iOS app, we append a variable to the end of the URL "/?app=true". 我们处理此问题的方式如下:当通过我们的iOS应用程序加载网页时,我们将一个变量附加到URL“/?app = true”的末尾。 What I'd like to do is check to see if the URL contains this string, and if so, use a different webview.
我想要做的是检查URL是否包含此字符串,如果是,请使用不同的webview。
I am attempting to do this with the below code: 我试图使用以下代码执行此操作:
<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>
The issue that I'm having is that the above code doesn't actually load the appstyle.css stylesheet when ?app=true is part of the URL. 我遇到的问题是,当app = true是URL的一部分时,上面的代码实际上并没有加载appstyle.css样式表。
If you take a look at http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2 you can see that I'm testing this by setting the background: black in the body {} tag 如果您查看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2,您可以看到我通过设置背景来测试它: body {}标签
body {
background: black;
}
Whereas, in style.css at http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 the body background color is #F2F0EB; 然而,在http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2的style.css中,正文背景颜色为#F2F0EB; in the body {} tag
在body {}标签中
body {
background: #F2F0EB;
}
Of course, we want to do more than just change the background color, but I'm just showing this as an example. 当然,我们想做的不仅仅是改变背景颜色,但我只是把它作为一个例子。
Is there a better way to do this, or is there something wrong with my code? 有没有更好的方法来做到这一点,或者我的代码有什么问题? Perhaps I cannot use a direct link to appstyle.css an href in javascipt?
也许我不能在javascipt中使用直接链接到appstyle.css和href? Help much appreciated.
非常感谢。 And Merry Christmas!
祝圣诞快乐!
You can add a CSS stylesheet by using appendChild() like this: 您可以使用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);
Of course you could change this example to accomodate different css file names depending on the current URL by doing something like this: 当然,您可以通过执行以下操作来更改此示例以根据当前URL容纳不同的css文件名:
styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';
You should never try to close the document when you use inline script. 使用内联脚本时,切勿尝试关闭文档。 document.close is only needed if you document.write to an iframe, frame or new window
只有在document.write到iframe,框架或新窗口时才需要document.close
Also I suggest you test the location.search rather than the href since that is where you placed the flag. 另外我建议你测试location.search而不是href,因为那是你放置旗帜的地方。
Please try 请试试
<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>
and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS 并且可能将该脚本放在其他样式表之后,如果要覆盖在您的站点中的10多张表中设置的内容,或者更好:在服务器上测试查询字符串,或者将查询字符串设置为app = yes ,在会话中设置一些东西或类似的东西,并使用它在服务器上包含正确的CSS而不是依赖JS
PS: Your body tag has the classes of home and blog on your homepage. PS:您的身体标签在您的主页上有主页和博客类。 I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.
我建议你看看上面提到的样式表,看看那些类的颜色是什么。
PPS: I do not see any media detection here 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' />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.