{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《Dynamic URLs in CSS/JS》','https://www.manongdao.com/q-487096.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm splitting up one of my larger apps and introducing a 'cdn' url to house common objects like CSS, javascript, and images to avoid duplication. What I need to do, though, is have separate URLs for our dev environments, so I may have:
http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com
depending on what environment we're working in. I can get this to work for things that are generated by our PHP code, but I'm at a loss for the .css and .js files that will be called. For example, how do I make something like:
.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }
switch between the different domains?
What's the best way to deal with that?
[EDIT]
Just so everyone is clear, the CDN address is a different domain that the site. So, the dev site might be http://www-dev.domain.com which would use http://cdn-dev.domain.com
Well...the solution I came up with was...sorta...hackish, ugly and dumb. But, hell, it worked:
This is, as noted, hacky and ugly and could be done far more prettily. But it does, at least, allow you to define specific locations for specific groups of files depending on the host.
If the server is same, you can use relative paths. Like /http/blah/test/images/button.png or ../images/button.png
When using relative URLs, you can force a "base" url. In the <head> tag, use <base href="http://cdn-dev.example.com">. Then, every relative link "/style.css" will point to "http://cdn-dev.example.com/style.css"
For reference: http://www.w3schools.com/TAGS/tag_base.asp
Searching for an answer to this too, I saw a simple one: create your css file with duplicate classes, one for scenario 1 (images load from same domain) and another for scenario 2 (images load from CDN).
e.g.
Then on your index.php introduce PHP to call the correct class
e.g.
Use relative paths, not absolute paths. When inside a CSS file, the path is relative to the CSS file and not the HTML page.
If your CSS file is here
And your class is
Then the browser will attempt to load the image from
You can also have a build process and use templates to generate environment specific files
e.g. in a file called yoursite.template.css
.cool-button { background-image: url('@@URL@@/images/button.png'); }
create the yoursite.css file than replace @@URL@@ with the domain you want.