chore(docs-app): remove document.write() from docs index.html

Previously, the docs app used `document.write()`, causing the following warning on Chrome: ``` A parser-blocking, cross site (i.e. different eTLD+1) script, https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. ``` In the past, `document.write()` seems to have been used in order for browsers (such as Firefox) to work correctly with our dynamically set `<base>` tag and relative style/script URLs. This commit replaces `document.write()` with regular `<style>`/`<script>` tabs to avoid the warning (and potential issues due to poor network connectivity). It seems that the latest versions of Chrome, Firefox and IE can handle this fine (without naticeable delays). Fixes #15396
angular · May 25, 2020 · a31c207 · a31c207
1 parent 2518966
commit a31c207
Showing 1 changed file with 24 additions and 38 deletions.
diff --git a/docs/config/templates/app/indexPage.template.html b/docs/config/templates/app/indexPage.template.html
@@ -1,3 +1,12 @@
+{# Macros #}
+{%- macro addTag(name, attributes) %}
+  <{$ name $}
+    {%- for attrName, attrValue in attributes -%}
+      {$ ' ' + attrName $}="{$ attrValue $}"
+    {%- endfor -%}
+    ></{$ name $}>
+{%- endmacro -%}
+
 <!doctype html>
 <html lang="en" ng-app="docsApp" ng-strict-di ng-controller="DocsController">
 <head>
@@ -24,50 +33,27 @@
     })();
   </script>
   <script type="text/javascript">
-    // dynamically add base tag as well as css and javascript files.
-    // we can't add css/js the usual way, because some browsers (FF) eagerly prefetch resources
-    // before the base attribute is added, causing 404 and terribly slow loading of the docs app.
+    // Dynamically add `<base>` tag.
     (function() {
-      var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1],
-          rUrl = /(#!\/|api|guide|misc|tutorial|error|index[^\.]*\.html).*$/,
+      var indexFile = (location.pathname.match(/\/(index[^.]*\.html)/) || ['', ''])[1],
+          rUrl = /(#!\/|api|guide|misc|tutorial|error|index[^.]*\.html).*$/,
           baseUrl = location.href.replace(rUrl, indexFile),
-          production = location.hostname === 'docs.angularjs.org',
           headEl = document.getElementsByTagName('head')[0],
-          sync = true;
-
-      addTag('base', {href: baseUrl});
-
-
-      {% for stylesheet in doc.stylesheets %}addTag('link', {rel: 'stylesheet', href: '{$ stylesheet $}', type: 'text/css'});
-      {% endfor %}
-
-      {% for script in doc.scripts %}addTag('script', {src: '{$ script $}' }, sync);
-      {% endfor %}
-
-      function addTag(name, attributes, sync) {
-        var el = document.createElement(name),
-            attrName;
+          baseEl = document.createElement('base');
 
-        for (attrName in attributes) {
-          el.setAttribute(attrName, attributes[attrName]);
-        }
-
-        sync ? document.write(outerHTML(el)) : headEl.appendChild(el);
-      }
-
-      function outerHTML(node){
-        // if IE, Chrome take the internal method otherwise build one
-        return node.outerHTML || (
-            function(n){
-                var div = document.createElement('div'), h;
-                div.appendChild(n);
-                h = div.innerHTML;
-                div = null;
-                return h;
-            })(node);
-      }
+      baseEl.setAttribute('href', baseUrl);
+      headEl.appendChild(baseEl);
     })();
+  </script>
 
+  {% for stylesheet in doc.stylesheets %}
+    {$- addTag('link', {rel: 'stylesheet', href: stylesheet, type: 'text/css'}) -$}
+  {% endfor %}
+  {% for script in doc.scripts %}
+    {$- addTag('script', {src: script}) -$}
+  {% endfor %}
+
+  <script type="text/javascript">
     // GA asynchronous tracker
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-8594346-3']);