Shorthand Http:// as // for Script and Link Tags? Anyone See/Use This Before

shorthand http:// as // for script and link tags? anyone see / use this before?

Starting a URL with // means "Use a different server but keep the same scheme"

So if you load //example.net/script from https://example.com/ it will get https://example.net/script, while if you load it from http://example.com/ it will get http://example.net/script.

If, on the other hand, you load it from file://c:/Users/You/Documents/test.html then it will probably not resolve to anything useful. Make sure you do development with a local web server (and access http://localhost/) if you use this syntax.

This is a standard part of URIs, it well supported, and is usually known as "scheme relative URIs"

Why using src=// instead of src=http://

It's a protocol-relative URI - if it appears in an http page it'll be treated as http:// but if it appears in an https page it'll be treated as https://.

If a page loaded over https includes other resources that are loaded over http then browsers will present a warning or may even consider the page as a whole to be "insecure". In order to ensure that the user doesn't get a "broken padlock" all images, JS and CSS files must also be https (not necessarily loaded from the same server or protected by the same certificate, but they must all be https connections that the browser knows to trust).

An http page loading https resources is less of an issue, but since you don't really gain anything in terms of the user experience by doing this, you might as well just load the resources via http too.

used instead of http:// on src= attribute

Using //, the request will mimic the protocol from the parent's page.

Have a look at this: http://paulirish.com/2010/the-protocol-relative-url/

No matter what - Reference error $ is not defined (jQuery UI)

Replace jquery link with this one and you are on:
https://code.jquery.com/jquery-2.2.0.min.js

i.e.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

CSS and JS Linking Without The Protocol

Yup. Paul Irish has a good blog entry about this. http://paulirish.com/2010/the-protocol-relative-url/

It's basic purpose is to prevent those IE pop ups that warn you that some of the resources on the page are "non-secure" when your main protocol is https but you grab something with http.

Two forward slashes in a url/src/href attribute

The "two forward slashes" are a common shorthand for "request the referenced resource using whatever protocol is being used to load the current page".

Best known as "protocol relative URLs", they are particularly useful when elements — such as the JS file in your example — could be served and/or requested from either a http or a https context. By using protocol relative URLs, you can avoid implementing

if (window.location.protocol === 'http:') {
    myResourceUrl = 'http://example.com/my-resource.js';
} else {
    myResourceUrl = 'https://example.com/my-resource.js';
}

type of logic all over your codebase (assuming, of course, that the server at example.com is able to serve content through both http and https).

A prominent real-world example is the Magento 1.X E-Commerce engine: for performance reasons, the category and product pages use plain http by default, whereas the checkout is https enabled.

If some resources (e.g. promotional banners in the site's header) are referenced via non protocol relative URLs (i.e. http://example.com/banner.jpg), customers reaching the https enabled checkout are greeted with a rather unfriendly

"there are insecure elements on this page"

prompt - which, one can safely assume, isn't exactly great for business.

If the aforementioned resource is referenced via //example.com/banner.jpg though, the browser takes care of loading it via the proper protocol both on the plain http product/category pages and in the https-enabled checkout flow.

tl;dr: With even the slightest possibility of a mixed http/https environment, just use the double slash/protocol relative URLs to reference resources — assuming that the host serving them supports both http and https.

How does the location of a script tag in a page affect a JavaScript function that is defined in it?

Telling people to add <SCRIPT> only in the head sounds like a reasonable thing to do, but as others have said there are many reasons why this isn't recommended or even practical - mainly speed and the way that HTML pages are generated dynamically.

This is what the HTML 4 spec says :

The SCRIPT element places a script
within a document. This element may
appear any number of times in the HEAD
or BODY of an HTML document.

And some sample HTML. Doesn't it look pretty all formatted here :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

And something to look forward to in HTML 5 :

New async attribute in <SCRIPT> :

Note: There are ways [sic] a script can be
executed:

The async attribute is "true": The
script will be executed asynchrously
with the rest of the page, so the
script will be executed while the page
continues the parsing.

The async attribute is "false", but
the defer attribute is "true": The
script will be executed when the page
is finished with the parsing.

---

Related Topics