Defer JavaScript scripts in html_document

R/html_dependencies.R

@@ -160,7 +160,10 @@ html_dependency_accessible_code_block <- function() {
     name = "accessible-code-block",
     version = "0.0.1",
     src = pkg_file("rmd/h/accessibility"),
-    script = "empty-anchor.js"
+    script = list(
+      src = "empty-anchor.js",
+      defer = NA
+    )
   )
 }
 
@@ -207,11 +210,13 @@ html_dependency_navigation <- function(code_menu, source_embed) {
 }
 
 html_dependency_anchor_sections <- function() {
-
   htmlDependency(name = "anchor-sections",
                  version = "1.0.1",
                  src = pkg_file("rmd/h/anchor-sections"),
-                 script = "anchor-sections.js",
+                 script = list(
+                   src = "anchor-sections.js",
+                   defer = NA
+                 ),
                  stylesheet = "anchor-sections.css")
 }
 
@@ -426,7 +431,10 @@ html_dependency_header_attrs <- function() {
       "header-attrs",
       version = packageVersion("rmarkdown"),
       src = pkg_file("rmd/h/pandoc"),
-      script = "header-attrs.js"
+      script = list(
+        src = "header-attrs.js",
+        defer = NA
+      )
     )
   )
 }

inst/rmd/h/accessibility/empty-anchor.js

@@ -2,7 +2,7 @@
 // v0.0.1
 // Written by JooYoung Seo ([email protected]) and Atsushi Yasumoto on June 1st, 2020.
 
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
   const codeList = document.getElementsByClassName("sourceCode");
   for (var i = 0; i < codeList.length; i++) {
     var linkList = codeList[i].getElementsByTagName('a');
@@ -12,4 +12,4 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     }
   }
-});
+})();

inst/rmd/h/anchor-sections/anchor-sections.js

@@ -1,5 +1,5 @@
 // Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
   // Do nothing if AnchorJS is used
   if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
     return;
@@ -30,4 +30,4 @@ document.addEventListener('DOMContentLoaded', function() {
     x.classList.add('hasAnchor');
     x.appendChild(anchor);
   });
-});
+})();

inst/rmd/h/pandoc/header-attrs.js

@@ -1,12 +1,14 @@
 // Pandoc 2.9 adds attributes on both header and div. We remove the former (to
 // be compatible with the behavior of Pandoc < 2.8).
-document.addEventListener('DOMContentLoaded', function(e) {
+(function() {
   var hs = document.querySelectorAll("div.section[class*='level'] > :first-child");
-  var i, h, a;
+  var i, h, a, hasAnchor;
   for (i = 0; i < hs.length; i++) {
     h = hs[i];
     if (!/^h[1-6]$/i.test(h.tagName)) continue;  // it should be a header h1-h6
+    hasAnchor = h.classList.contains('hasAnchor');
     a = h.attributes;
     while (a.length > 0) h.removeAttribute(a[0].name);
+    if (hasAnchor) h.classList.add('hasAnchor'); // avoid a conflict with anchor-sections.js
   }
-});
+})();