Menu
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
211
var pathname = window. location. pathname; var splitPath = pathname. split("?"); var input = splitPath[splitPath.
replace() : // Current URL: https://my-website.com/page_a const nextURL = 'https://my-website.com/page_b'; // This will create a new entry in the browser's history, reloading afterwards window. location. href = nextURL; // This will replace the current entry in the browser's history, reloading afterwards window.
Usually, a dynamic URL would look something like this: http://code.google.com/p/google-checkout-php-sample-code/issues/detail?id=31. You can spot dynamic URLs by looking for characters like: ? , = , & . Dynamic URLs have the disadvantage that different URLs can have the same content.
This is a collection of methods which give you the ability to query the stylesheets collection in a document, add and remove rules, and dynamically create new sheets.
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
http://cdn.example.com/css/style.css
And your class is
.cool-button { background-image: url('../images/button.png'); }
Then the browser will attempt to load the image from
http://cdn.example.com/images/button.png
Just use domain-relative url's?
.cool-button { background-image: url('/images/button.png'); }
Then the browser will look under the current domain.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
