Menu
I couldn't find any documentation or specification regarding src attribute of script tag.
Browsers manipulate a value of this attribute that it always reflects absolute URI. Let's consider a following example:
domain: https://example.com
script tag: <script src="/path/a/b/c.js"></script>
script.getAttribute("src")
> /path/a/b/c.js
script.src > https://example.com/path/a/b/c.js
As you can see there's difference between src and getAttribute("src").
I'd like to know where I can find details about it (documentation / specification / source code of browser's implementation).
What is the support of this feature among browsers (including mobile)?
327
I found it in the HTML5 specification:
First there's this that discusses the .src property for a <script> tag:
The IDL attributes src, type, charset, defer, each must reflect the respective content attributes of the same name.
Then, if you follow a link in that specification to see what "reflect" means, you get to this:
If a reflecting IDL attribute is a DOMString attribute whose content attribute is defined to contain a URL, then on getting, the IDL attribute must resolve the value of the content attribute relative to the element and return the resulting absolute URL if that was successful, or the empty string otherwise; and on setting, must set the content attribute to the specified literal value. If the content attribute is absent, the IDL attribute must return the default value, if the content attribute has one, or else the empty string.
So, to describe this in a little brief form: If you set the .src property (or any other property that takes a URL), then exactly what you set is stored as the property. When you get the .src property, the value returned is the resulting absolute URL after the property has been resolved relative to the base URL.
As for .getAttribute(), the specification for that is here. It just says:
Retrieves an attribute value by name.
Return Value
DOMString | The Attr value as a string, or the empty string if that attribute does not have a specified or default value.
Notably absent from this description is anything related to the special behavior that URL attributes have when reading their property directly as describe above. Thus, using .getAttribute() does not have that special "reflect" behavior. It just returns the raw value of the attribute with no special getter behavior.
This is an intended behavior and has been this way for a long time. There are also specific developer websites for particular browsers that describe the behavior.
Reading the .src property always returns a fully qualified URL, regardless of what you assigned in the HTML or via Javascript.
Reading that same property with .getAttribute("src") returns exactly what was in the HTML.
Microsoft documents how IE behaves in this regard for any tag that has a URI as a property starting with IE8 here.
Mozilla documents how Firefox behaves in this regard for images here.
Demo for images (though all types of tags that have a src or href property appear to have the same behavior (including <script> tags):
var t = document.getElementById("target");
log("target.getAttribute('src') = ", target.getAttribute('src'));
log("target.src = ", target.src);<head>
<script src="http://files.the-friend-family.com/log.js"></script>
<base href="http://dummyimage.com">
</head>
<img id="target" src="/200x100/000/fff">In fact, here's a little utility that takes advantage of this fact:
function makeAbsolute(uri) {
var a = document.createElement("a");
a.href = uri;
return a.href;
}
var x = makeAbsolute("test.html");
document.write(x);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
