By utilizing // within the source of a <script>, one can efficiently reference external files without specifying the

Curious if anyone has come across any evidence, proof, or firsthand accounts of utilizing the traditional http/https JavaScript <script> hack:

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

Have you faced any problems with this method in browsers like IE 5.5+, FF2+, Chrome, Opera 9+, Safari 3+? Any success stories to share?

Answer №1

Every up-to-date web browser should be able to interpret this format, even IE 6 (though IE 5.5 is a bit iffy).

In reality, this isn't some workaround; it follows the correct URI syntax outlined in RFC 3986: Section 4.2. So, feel confident moving forward with this approach.

Answer №2

Allow me to direct you to exactly what you are seeking. The information you are looking for is within an RFC document, so there may be some extraneous details to sift through before finding what you need. However, this method is a legitimate feature (not a workaround) commonly used by supposed http clients.

b) If the embedded URL begins with a scheme name, it is interpreted as an absolute URL and the search ends here.
          
c) If the embedded URL does not start with a scheme name, it takes on the scheme of the base URL.

To explore further: (look for the section "Resolving Relative URLs" and refer to steps 1 and 2 below). Alternatively, visit:

A little note: I implement this method in most of my projects, not only for JavaScript resources but also for linking to images and CSS files (UPDATED: excluding stylesheets).

This approach works universally. I have tested it in various browsers like IE, Firefox, Opera, Chrome, Safari/Webkit, including earlier versions where applicable.

Here are a few examples:

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

I prefer using this technique over writing code to determine whether we are on http or https.

The only exception is avoiding its use for stylesheets.

While the following method is valid and functional:

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

In Internet Explorer, this will result in two HTTP requests. This issue affects IE7, IE8, and early versions of IE9.

In essence, scheme relative URIs can and should be utilized for all resources except stylesheets.

Answer №3

Since posting this inquiry, I have consistently implemented this schema without encountering any issues. It has proven to be compatible with all web browsers, including IE5.5. Much of my work involves JavaScript functionality, and this method effectively incorporates the necessary scripts.

Answer №4

It seems that the confusion arises from the way Google Analytics standard code handles hostnames based on the protocol. There could be different SSL and non-SSL hostnames due to network reasons, causing this discrepancy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching between play and pause for the video element using a component for the child

Trying to toggle the play/pause of a child video by clicking on a parent div can be challenging, especially when dealing with multiple instances of the same div and video. A normal function may only work for one specific video, as mentioned by @ken. I hav ...

Adding multiple elements with varying content to a separate division

I am attempting to combine two div elements into a single div, but I'm encountering difficulties. Despite thoroughly examining my code, everything appears to be correct. Here's what I've tried so far. To assist me in achieving this, I am ut ...

Error encountered while utilizing a custom third-party component within an Angular project during static analysis

Currently, I am utilizing an Angular (2+) datepicker component (link to Github) in two separate Angular projects: Angular CLI v1.0.0-beta.30, Angular v2.3 Angular CLI v1.0.0, Angular v4.0 The first project works flawlessly both during development with n ...

Tips for adding a console.log statement to material-ui components to confirm the object/array/value

An issue arises in my React JS code snippet execution that I need help with: <TableBody> { (data.length > 0) ? ( data.map((x, i) => row( x, i, formColumns, handleRemove, handleSelect, editIdx ))) : (<TableRo ...

Exporting Typescript to Javascript files

I have created a sample TypeScript object with the following code: declare const S3 = "https://s3.amazonaws.com/xxx/icons"; declare const SVG = "svg-file-icons"; declare interface MyIcons { "image/jpeg": string; "image/jpg": string; } export const F ...

Trouble with Setting a Background Image in Ionic with Javascript and Angular

I'm having trouble getting my background image to display in this Ionic project using CSS. It works when I embed it directly into the HTML, but that's not an ideal solution. I vaguely recall something about using base64 for images, but I'm n ...

Why isn't my file being recognized post-multer middleware?

I am currently facing an issue with uploading a filename and a post (similar to 9GAG style) to my MySQL database, and storing the file in my project folder. The front end is able to retrieve the file without any problems (verified through console.log), but ...

Empty Canvas: Google Charts Graph Fails to Populate

I am currently using mysql, php, and javascript to display a curve chart. The issue I am facing is that the chart appears blank. google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLo ...

Exploring the wonders of looping through arrays with JavaScript and jQuery

I am having trouble getting this function to work properly. My goal is to replace certain characters when a key is pressed. The code works fine using the variable `replace_list` instead of `replace_list["russian"]`, but I actually need different "replace ...

Verify if a set of Radio buttons contains at least one option selected

Need help with validating a Feedback Form using either JQuery or Javascript. The requirement is to ensure that every group of radio-buttons has one option selected before the form can be submitted. Below is the code snippet from form.html: <form id=&ap ...

Prevent selection duplication in adjacent select by disabling the option in AngularJS ng-options

In my table, I have 2 select options that change dynamically. <tr> <th>Start time</th> <th>End time</th> </tr> <tr ng-repeat="s in config.time"> <td> <select ng-model="s.start_time" ...

Guide on how to retrieve the vertex information once an object is loaded using the ObjLoader in Three.js

When using ObjLoader in Three.js to load a *.obj file into my scene, everything works fine. However, I'm uncertain on how to manipulate the object's vertices and indices individually. How can I access the vertices of the loaded *.obj model? Atte ...

Steps for incorporating the getElementByClassName() method

I have developed an application that features a list displayed as shown below: https://i.stack.imgur.com/BxWF2.png Upon clicking each tick mark, the corresponding Book name is added to a textbox below. I desire the tick mark to be replaced by a cross sym ...

performing a query on two tables with sequelize

There must be a more efficient way to accomplish this task with fewer lines of code. I am not very experienced with databases and I am new to sequelize and node. The user id is passed as a parameter and I need to check if there is a corresponding user in ...

Leveraging Async / Awaits with Promise

Within my code, I have a specific promise chain that follows this structure: myPromise() .then(getStuffFromDb) .then(manipulateResultSet) .then(manipulateWithAsync) .then(returnStuffToCaller) An issue arises when working within the mani ...

navigating between html pages using sliding next and previous buttons

I am in the process of developing a multi-page form spread across 4 different pages. I would like to incorporate next and previous buttons to allow users to easily navigate through the form. Although I have tried looking online for solutions, most results ...

Leveraging the power of Javascript/jQuery to manipulate form

On my website, I have implemented a form that requires a customized response for certain zip codes. To achieve this, I am developing a code that validates the first 3 digits of the entered zip code against a predefined array in my system. Although the code ...

Discover the Practical Utility of Maps beyond Hash Tables in Everyday Life

I am currently attempting to explain the concept of Maps (also known as hash tables or dictionaries) to someone who is a beginner in programming. While most people are familiar with the concepts of Arrays (a list of things) and Sets (a bag of things), I ...

There is no 'depto_modules.length' property in this row. How should I go about fixing this issue?

I have a table set up to display data from an associated table. The functionality is working fine, but I keep seeing a warning message when I apply certain filters: The warning states that the property depto_modules.length does not exist in the row. It ad ...

Adding a method to a node module by hand

Working with my website, I've incorporated the material-ui package, but the version available on npm is outdated compared to the latest one on Github. To reflect these updates, I manually inserted this line of code into their Theme Manager class: set ...