All geek questions in one place

Why does script.src work the same way it does?

I could not find any documentation or specification regarding the src attribute of the script tag.

Browsers manipulate the value of this attribute, which always reflects the absolute URI . Consider the 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, the difference between src and getAttribute("src") .

I would like to know where I can find detailed information about this (documentation / specification / browser implementation source code).

What is the support for this feature among browsers (including mobile)?

+5
source share
2 answers

I found it in the HTML5 specification :

First this , which discusses the .src property for the <script> :

The IDL attributes src, type, charset, defer, each should reflect the corresponding content attributes with the same name.

Then, if you follow the link in this specification to see what “reflect” means, you can:

If the reflecting IDL attribute is a DOMString attribute, the contents of which the attribute is defined as containing the URL, and then, upon receipt of the IDL, the attribute must resolve the value of the content attribute relative to the element and return the received absolute URL if it was successful, or an empty string otherwise; and when setting up, you must set the content attribute to the specified literal value. If the content attribute is missing, the IDL attribute should return a default value if the content attribute has one or an empty string.

So, to describe this in a short short form: if you set the .src property (or any other property that accepts a URL), then exactly what you set is saved as a property. When you get the .src property, the return value is the final absolute URL after the property has been resolved relative to the base URL.

Regarding .getAttribute() , the specification for this is here . He just says:

Gets the attribute value by name.

Return value

DOMString | Attr value as a string or an empty string if this attribute does not have a specified or default value.

It is noteworthy that in this description there is nothing related to the special behavior that URL attributes have when reading their properties directly, as described above. Thus, the use of .getAttribute() does not have such a special "reflected" behavior. It simply returns the original attribute value without special getter behavior.

This is intentional behavior and has been this way for a long time. There are also specific developer sites for specific browsers that describe behavior.

Reading the .src property always returns the full URL, regardless of what you assigned in HTML or through Javascript.

Reading the 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 reports how Firefox behaves in this regard for images here .

Image demonstration (although all tag types that have the src or href property 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 is a little utility that uses this fact:

 function makeAbsolute(uri) { var a = document.createElement("a"); a.href = uri; return a.href; } var x = makeAbsolute("test.html"); document.write(x);
+5
source

Regarding <script src="..."> , in particular, the MDN documentation does not mention the src property, which should return the full URI.

spec only addresses the src attribute:

The src attribute, if specified, indicates the address of an external script resource. The attribute value must be a valid non-blank URL, potentially surrounded by spaces identifying a script resource of the type indicated by the type attribute if the attribute is present, or of type " text/javascript " if the attribute is missing. A resource is a script resource of this type if this type identifies a scripting language and the resource meets the requirements of this language specification.

However, I checked that Chrome, Firefox, and Safari implement the behavior you described.

In general, there is a difference between element attributes and properties, and they do not have to agree.

Attributes

Without diving too far into the Element specification, the instance supports attributes , which contains the DOM attributes on the node. For example, the following item

 <div id="test"></div>

has an id attribute with the value "test" . Note that attribute names and values ​​are always strings (more precisely, DOMString s).

Access to attributes is possible using element.getAttribute(name) .

The properties

In addition, an Element instance, like any JavaScript object, has a set of properties available directly in the instance. For example, innerHTML is a property.

Access to properties can be obtained simply using dot notation, i.e. element.innerHTML . They are allowed to have getters and setters.

In the case of the <script> element (an instance of HTMLScriptElement ), both the src property and the src attribute exist. Note:

 // check out the descriptor of the src property console.log(Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src').get); var script = document.createElement('script'); console.log(script.getAttribute('src')); console.log(script.src); script.src = 'test.js'; console.log(script.getAttribute('src')); console.log(script.src); script.setAttribute('src', 'foo.js'); console.log(script.getAttribute('src')); console.log(script.src);

Exit (Chrome 47):

 function () { [native code] } null test.js http://stacksnippets.net/test.js foo.js http://stacksnippets.net/foo.js

Access src property for an element, calls a getter for this property, which returns the full URL. Getting the src attribute returns any string set there as-is, or null if the attribute is not already set.

+1
source

Source: https://habr.com/ru/post/1241766/

More articles:


All Articles