Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using // in a <script>'s source

I was wondering if anyone had any resources, proof, or personal experience in using the age-old http/https JavaScript <script> hack:

<script src="//someserver.com/js/script.js"></script>

Has anyone encountered issues in any of these browsers (IE 5.5+, FF2+, Chrome, Opera 9+, Safari 3+)? Has anybody had success stories?

like image 678
Dan Beam Avatar asked Mar 16 '10 22:03

Dan Beam


People also ask

What is script source?

The src attribute specifies the URL of an external script file. If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again.

What are script tags used for?

Definition and Usage. The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

How do I create a dynamic script tag?

Dynamic loadingCreate a script element. Set the src , async , and type attributes. Append the script element to the body. Check if the file loaded or not in the load event.


2 Answers

All modern browsers will understand that format, including IE 6. (Not sure about IE 5.5).

Actually, this is not a hack, but a perfectly valid URI syntax as per RFC 3986: Section 4.2. Therefore, I say you're good to go.

like image 83
Daniel Vassallo Avatar answered Sep 21 '22 07:09

Daniel Vassallo


I can point you to exactly what you are looking for. It is an RFC document so you have to sift through a lot of noise to get to what you want but this is a legit feature (not a hack) of supposed http clients.

       b) If the embedded URL starts with a scheme name, it is
          interpreted as an absolute URL and we are done.

       c) Otherwise, the embedded URL inherits the scheme of
          the base URL.

Read more: http://www.faqs.org/rfcs/rfc1808.html (search for the heading "Resolving Relative URLs" and see steps 1 and 2 below) or here: http://freesoft.org/CIE/RFC/1808/18.htm

As an FYI, I use this in pretty much all of my production projects -- not just for JS resources, but for links to other resources such as images and CSS (UPDATED: I no longer use this for linking stylesheets).

Works pretty much everywhere. I've tried this in IE, FF, Opera, Chrome, Safari/Webkit all going back multiple previous versions (where applicable).

Examples:

  • < img src="//static.example.com/img/token.png" />
  • < script type="text/javascript" src="//static.example.com/js/jquery.js">

I find this method to be cleaner than writing code to figure out if we are on http/https.

The only caveat is that you should not use this for stylesheets.

While the following is legal and works:

  • < link rel="stylesheet" type="text/css" href="//static.example.com/css/screen.css" media="screen" />

In IE, the above will cause two HTTP requests. Currently, this affects IE7, IE8, and early versions of IE9.

In other words, scheme relative URIs should/can be used for all resources except stylesheets.

like image 37
Wil Moore III Avatar answered Sep 21 '22 07:09

Wil Moore III