When I saw it, I thought, “That doesn’t look right. It won’t work.” But I was wrong. Sure, it’s missing an ‘http:’ or ‘https:’ prefix, but it works just fine. Look at the source for this page, and you’ll see that there is no ‘http’ or ‘https’ in the link above. But if you click on it, it loads jQuery without any trouble.
Protocolless URLs are interesting, but what’s the point? And what are the other options?
How can you add a script tag that loads jQuery?
There are four ways to add a reference to the jquery.min.js file:
This is the worst option, because when a user hits your site over HTTPS (at https://www.contoso.com), they will get nasty browser warning errors about mixed security, or their browser might silently not load jQuery. This is because the browser is connecting to a secure site and is reluctant to load insecure (HTTP) resources.
This will get around the browser warnings, described in option 1, but it introduces an inefficiency - SSL is always used to load the jquery library, even when the user is hitting your site without SSL (http://www.contoso.com). Your site can load faster if you can remove this SSL dependency.
(‘https:’==document.location.protocol ? 'https://....' : 'http://....')
This is the best option (and is recommended by Google), because when users connect to your insecure site (http://www.contoso.com), jQuery will load over HTTP, and when users connect to your secure site (https://www.contoso.com), jQuery will load over HTTPS.
In order for a protocolless URL to work well, you need to ensure that the resource being linked to is available over both HTTP and HTTPS. In the example above, that means that jquery needs to be available at both of these URLs:
The reason for this is that some users will be on a HTTP page, and thus load jQuery via HTTP, while others will be on a HTTPS page, and thus load jQuery via HTTPS.
I was a bit unsure of this at first, but after testing it out, it seems to work well on Firefox, IE, and Chrome (I didn’t test any other browsers). So the support seems to be there. But is this just some weird quirk of URLs, or is it intentional? Interestingly, URLs are supposed to work like this - If you look at RFC 3986, you can see that protocolless URL is a proper, well formed URL according to internet standards. According to the RFC, a protocolless URL is properly identified as a “network-path reference,” but I prefer the term protocolless URL, as it’s easier to remember and more descriptive.
You can type a protocolless URL into your browser bar, and it will work, defaulting to HTTP
You can create an anchor tag with a protocolless URL on your page, and the link will pick up the protocol of the page that it’s on. In the screenshots, notice that since the protocol is not specified, the protocol in the tooltip matches the protocol in the address bar.
You can use protocolless URLs to add CSS or JS resources to your page
Also, it appears that if you use a protocolless URL to reference a CSS file, IE7 and IE8 will download the CSS file twice. If only we could get everyone to move up to IE9…