Question

我无法找到有关src标记的script属性的任何文档或规范。

浏览器操纵此属性的值，它始终反映absolute URI。让我们考虑以下示例：

域名：https://example.com

脚本代码：<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

正如您所看到的，src和getAttribute("src")之间存在差异。

我想知道在哪里可以找到有关它的详细信息（浏览器的文档/规范/源代码及其实现）。

浏览器（包括移动设备）对此功能的支持是什么？

Answer 1

我在HTML5 specification：

中找到了它

首先，this讨论了.src代码的<script>属性：

IDL属性src，type，charset，defer，每个都必须反映出来相同名称的相应内容属性。

然后，如果您按照link in that specification查看“反映”的含义，就可以实现：

如果反射IDL属性是其内容的DOMString属性属性被定义为包含URL，然后获取IDL 属性必须解析相对于的content属性的值元素并返回结果绝对URL （如果是）成功，否则为空字符串;并且在设置时，必须设置 content属性为指定的文字值。如果是内容属性不存在，IDL属性必须返回默认值，如果content属性有一个，或者是空字符串。

因此，要以一个简短的形式描述它：如果设置.src属性（或任何其他属性采用URL），那么您设置的确切内容将存储为属性。获得.src属性后，返回的值是在相对于基本URL解析属性后生成的绝对URL。

至于.getAttribute()，其规格为here。它只是说：

按名称检索属性值。

返回值

DOMString | Attr值为字符串，如果该属性为空字符串   没有指定或默认值。

值得注意的是，此描述中没有任何内容与URL属性在直接读取其属性时所具有的特殊行为有关，如上所述。因此，使用.getAttribute()没有那种特殊的“反映”行为。它只返回属性的原始值，没有特殊的getter行为。

这是一种预期的行为，并且这种方式已经很长时间了。还有针对描述行为的特定浏览器的特定开发人员网站。

阅读.src属性始终返回完全限定的URL，无论您在HTML中或通过Javascript分配了什么。

使用.getAttribute("src")读取相同的属性会返回HTML中的内容。

Microsoft记录IE在这方面对于具有URI作为以IE8 here开头的属性的任何标记的行为。

Mozilla记录了Firefox在这方面的行为here。

模拟演示（尽管所有类型的src或href属性标签似乎都具有相同的行为（包括<script>标签）：

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">

事实上，这是一个利用这个事实的小实用工具：

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

Answer 2

关于<script src="...">具体而言，MDN documentation未提及必须返回完全限定URI的src属性。

spec仅处理src属性：

src 属性（如果已指定）提供要使用的外部脚本资源的地址。属性的值必须是有效的非空URL，可能由标识type属性所给类型的脚本资源的空格包围，如果属性存在，或者类型为＆＃34; {{ 1}}＆＃34;，如果属性不存在。如果该类型标识脚本语言且资源符合该语言规范的要求，则资源是给定类型的脚本资源。

尽管如此，我已经检查过Chrome，Firefox和Safari都实现了你提到的行为。

一般来说，元素属性和属性之间存在差异，两者不一定要达成一致。

属性

如果没有深入了解规范，Element实例会维护一个attributes集合，该集合在节点上保存 DOM属性。例如，以下元素

text/javascript

的<div id="test"></div>属性值为id。请注意，属性名称和值始终是字符串（更确切地说，"test" s）。

可以使用DOMString访问属性。

属性

此外，element.getAttribute(name)实例与任何JavaScript对象一样，具有一组可直接在实例上访问的属性。例如，Element是一个属性。

可以使用点符号简单地访问属性，即innerHTML。他们被允许有吸气剂和制定者。

对于element.innerHTML元素（<script>的实例），有HTMLScriptElement属性和src属性。观察：

＆＃13;

src

＆＃13;

输出（Chrome 47）：

// 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);

访问元素上的function () { [native code] } null test.js http://stacksnippets.net/test.js foo.js http://stacksnippets.net/foo.js 属性会调用该属性的getter，该属性将返回完全限定的URL。检索src 属性会返回您按原样设置的字符串，如果尚未设置属性，则返回src。

为什么script.src工作正常？

2 个答案:

属性

属性