TL;DR:
-
<meta> 标签被添加到 CSS 类为 sr-only 的 DOM。
- 额外的 JavaScript 被写入 DOM,其中:
- 找到所说的
<meta>元素。
- 检查所述元素是否具有设置为
absolute 的 CSS 属性 position。
- 如果未设置此类属性值,则会向 DOM 写入一个额外的
<link> 元素,其中 href 为 ~/lib/bootstrap/dist/css/bootstrap.min.css。
针对您的<link> 元素运行的LinkTagHelper 类会在输出HTML 中插入一个<meta> 元素,该元素的CSS 类为sr-only。该元素最终看起来像这样:
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
生成元素的代码如下所示(来源):
builder
.AppendHtml("<meta name=\"x-stylesheet-fallback-test\" content=\"\" class=\"")
.Append(FallbackTestClass)
.AppendHtml("\" />");
不出所料,FallbackTestClass 的值是从<link> 的asp-fallback-test-class 属性中获得的。
在这个元素被插入之后,一个对应的<script> 块也被插入(source)。代码是这样开始的:
// Build the <script /> tag that checks the effective style of <meta /> tag above and renders the extra
// <link /> tag to load the fallback stylesheet if the test CSS property value is found to be false,
// indicating that the primary stylesheet failed to load.
// GetEmbeddedJavaScript returns JavaScript to which we add '"{0}","{1}",{2});'
builder
.AppendHtml("<script>")
.AppendHtml(JavaScriptResources.GetEmbeddedJavaScript(FallbackJavaScriptResourceName))
.AppendHtml("\"")
.AppendHtml(JavaScriptEncoder.Encode(FallbackTestProperty))
.AppendHtml("\",\"")
.AppendHtml(JavaScriptEncoder.Encode(FallbackTestValue))
.AppendHtml("\",");
这里有一些有趣的事情:
- 注释的最后一行,指的是占位符
{0}、{1}和{2}。
-
FallbackJavaScriptResourceName,表示输出到 HTML 中的 JavaScript 资源。
-
FallbackTestProperty和FallbackTestValue,分别从asp-fallback-test-property和asp-fallback-test-value属性中获取。
那么,让我们看看那个 JavaScript 资源 (source),它归结为一个具有以下签名的函数:
function loadFallbackStylesheet(cssTestPropertyName, cssTestPropertyValue, fallbackHrefs, extraAttributes)
结合我之前提到的注释的最后一行以及asp-fallback-test-property 和asp-fallback-test-value 的值,我们可以推断它是这样调用的:
loadFallbackStylesheet('position', 'absolute', ...)
我不会深入研究 fallbackHrefs 和 extraAttributes 参数,因为它们应该有些明显且易于自己探索。
loadFallbackStylesheet 的实现并没有多大作用 - 我鼓励您自己探索完整的实现。这是来自源的实际检查:
if (metaStyle && metaStyle[cssTestPropertyName] !== cssTestPropertyValue) {
for (i = 0; i < fallbackHrefs.length; i++) {
doc.write('<link href="' + fallbackHrefs[i] + '" ' + extraAttributes + '/>');
}
}
脚本获取相关的<meta> 元素(假定它直接位于<script> 本身的上方)并简单地检查它是否具有设置为absolute 的position 属性。如果没有,则会将额外的 <link> 元素写入每个后备 URL 的输出。