Welchen Zweck erfüllt ein <script> -Tag innerhalb eines <noscript> -Tags?

139

Ich war in letzter Zeit auf einer "View Source" -Bummel auf Websites mit interessantem Design und Inhalt. Eine dieser Websites, Squarespace , enthält Blöcke von <script>Tags in einem <noscript>Tag, wie folgt :

<!-- Page is at: http://squarespace.com -->
...
...
<noscript id="inline-deps">
  <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7811972/758964/css/fonts.css" />

  <script type="text/javascript" src="https://static.squarespace.com/static/ta/5134cbefe4b0c6fb04df8065/7400/assets/logomark/logomark.min.js?37"></script>
  <link rel="stylesheet" href="https://static.squarespace.com/static/ta/5134cbefe4b0c6fb04df8065/7400/assets/logomark/logomark.min.css?37" type="text/css" />
</noscript>
...
...

Es kam mir seltsam vor und brachte mich dazu, nach Informationen zu googeln, um zu sehen, ob es eine versteckte Funktionalität / einen versteckten Zweck für solch ein seltsames Stück HTML gibt, aber ohne Erfolg. Gibt es einen Zweck, <script>Tags in <noscript>Elementen zu haben, oder ist dies nur ein Beispiel für schlechtes HTML?

Agent.Logic_
quelle
18
IMHO macht das keinen Sinn und es ist nur ein Fehler.
Sebastien C.
12
Vielleicht ist das nur eine seltsame Art, JS zu kommentieren.
AlexR
8
Geht man von der Tatsache , dass sie einen vollständigen Header (einschließlich <base href="">, <meta … />, <title>und <link … />Elemente) es sieht aus wie sie missbrauchen <noscript>für Templating.
Bergi
2
Gute Frage! Aber schrecklich, weil Sie jetzt einen weiteren "View Source" -Bummel für mich gestartet haben. Ich bin gerade aus dieser Gewohnheit herausgekommen!
Bobo
2
@ Bobo: Aber es ist eine gute Sache, sich den Code anzusehen, um zu verstehen, was in der Matrix passiert! ;)
Agent.Logic_

Antworten:

139

Ich habe den Code durchsucht und dieses Snippet gefunden (ich habe es bereinigt, um es besser lesbar zu machen):

var DepLoader = (function () {
  function init() {
    var dependencies = document.getElementById("inline-deps");
    if (!dependencies || JS.hasClass(document.body, "deps--loaded")) {
      webfontsReady();
    } else {
      var html = dependencies.innerText || dependencies.textContent;
      JS.addClass(document.body, "deps--loaded");
      processRaw(html);
    }
  }

  function isListed(a, b) {
    for (var i = 0; i < b.length; i++) {
      if (a.indexOf(b[i]) !== -1) {
        return true;
      }
    }
    return false;
  }

  function webfontsReady() {
    JS.fireCustom("webfontsReady");
  }

  function processRaw(html) {
    var el = document.createElement("div");
    el.innerHTML = html;

    var scripts = el.querySelectorAll("script");
    var styles = el.querySelectorAll("link");
    var common, signup, dialog, systemPage, commerce;
    var others = [];
    var inline = [];
    var styleWhiteList = ["site.css", "dialog-", "signup-", "logomark"];
    var scriptBlackList = ["management-", "ckeditor-"];

    for (var i = 0; i < styles.length; i++) {
      var style = styles[i];
      if (style.href.indexOf("fonts.css") !== -1) load(style, webfontsReady);
      if (isListed(style.href, styleWhiteList)) load(style);
    }

    for (var i = 0; i < scripts.length; i++) {
      var script = scripts[i];
      var src = script.src;

      if (!src && script.getAttribute("data-sqs-type") !== "dynamic-assets-loader" && script.innerHTML.indexOf("SQUARESPACE_ROLLUPS") === -1) {
        eval(script.innerHTML);
      }
    }

    if (window.SQUARESPACE_ROLLUPS) {
      for (var key in SQUARESPACE_ROLLUPS) {
        var rollup = SQUARESPACE_ROLLUPS[key];
        var js = rollup.js;
        var css = rollup.css;

        if (key.indexOf("common") !== -1) {
          common = js;
        } else if (key.indexOf("commerce") !== -1) {
          commerce = js;
        } else if (key.indexOf("signup") !== -1) {
          signup = js;
        } else if (key.indexOf("dialog") !== -1) {
          dialog = js;
        } else if (key.indexOf("system-page") !== -1) {
          systemPage = js;
        } else if (key) {
          others = others.concat(js);
        } else {
          inline = inline.concat(js);
        }
      }
    }

    for (var i = 0; i < scripts.length; s++) {
      var script = scripts[i];
      var src = script.src;

      if (!isListed(src, scriptBlackList)) {
        if (src.indexOf("common-") !== -1) {
          common = script;
        } else if (src.indexOf("commerce-") !== -1) {
          commerce = script;
        } else if (src.indexOf("signup-") !== -1) {
          signup = script;
        } else if (src.indexOf("dialog-") !== -1) {
          dialog = script;
        } else if (src.indexOf("system-page-") !== -1) {
          systemPage = script;
        } else if (src) {
          others.push(script);
        } else {
          inline.push(script);
        }
      }
    }

    function loadOthers() {
      for (var i = 0; i < inline.length; i++) {
        if (inline[i].getAttribute("data-sqs-type") !== "dynamic-assets-loader") {
          load(inline[a]);
        }
      }

      for (var i = 0; i < others.length; i++) {
          load(others[i]);
      }

      JS.fireCustom("dependenciesLoaded");
    }

    var loadSystemPage = load.bind(this, systemPage, loadOthers, "system page");
    var loadSignup = load.bind(this, signup, loadSystemPage, "signup");
    var loadCommerce = load.bind(this, commerce, loadSignup, "commerce");
    var loadDialog = load.bind(this, dialog, loadCommerce, "dialog");
    var loadCommon = load.bind(this, common, loadDialog, "common");

    loadCommon();
  }

  function load(tag, callback, label) {
    var head = document.head;

    if (Array.isArray(tag)) tag = { nodeName: "SCRIPT", src: tag[0] };

    if (!tag) {
      if (callback) callback();
      return;
    }

    if (tag && (tag.src || tag.href)) {
      var child;
      if ("SCRIPT" === tag.nodeName) {
        child = document.createElement("script");
        child.src = tag.src;

        if (child.src.indexOf("combo") !== -1) {
          callback = function () {
            Y.Squarespace.FrontSite.Core.domReady(true)
          };
        }
      } else {
        if ("LINK" === tag.nodeName && "stylesheet" === tag.rel) {
          child = document.createElement("link");
          child.href = tag.href;
          child.rel = "stylesheet";
          child.tyle = "text/css";
        }

        if (child) {
          child.onload = callback;
          head.appendChild(child);
        }
      }
    } else {
      try {
        eval(tag.innerHTML);
      } catch (e) {}
    }
  }

  return { init: init, webfontsReady: webfontsReady };
})();

Wie Sie sehen können, verfügt das <noscript>Tag über die ID #inline-deps, auf die im Code (Zeile 3) verwiesen wird, um Abhängigkeiten asynchron und bei Bedarf zu laden.

Sie verwenden wahrscheinlich ein <noscript>Element, da es ihnen ermöglicht, direkt auf DOM-Elemente zuzugreifen, anstatt es in eine Zeichenfolge oder einen Kommentar einfügen zu müssen (was ich besonders schlecht finde, da Kommentare nicht für tatsächliche Informationen gedacht sind) und es dann zu analysieren. Es verhindert auch die Ausführung von Skripten und CSS-Stilen, bis sie speziell geladen werden.

Ich persönlich finde das einen Missbrauch des <noscript>Tags. Ich bin mir nicht mal sicher, ob es sich um gültigen HTML5-Code handelt. Wenn möglich, sollten andere Methoden verwendet werden, z. B. das Deklarieren von Abhängigkeiten in einem JavaScript-Objekt mit einem Skriptlader.

Qantas 94 Heavy
quelle
71
Diese hinterhältigen Code-Hacker;). Ich hoffe, sie haben es gut dokumentiert, bevor ein kluger Kerl es löschte, "da es keinen Nutzen hat".
Patrick Hofman
6
Ich habe gesehen <script type="text/html">...</script>, für den gleichen Zweck verwendet - hat jemand Vor- / Nachteile der beiden?
Shai
4
Es ist wahrscheinlich, dass alles darin <noscript>für Nicht-JavaScript-Benutzer sichtbar ist. Die meisten Websites unterstützen diese Benutzer einfach nicht, aber Sie möchten ihnen auch eine einfache erklärende Nachricht anzeigen.
Katana314
8
Das sind einige außerordentlich schlechte Praktiken, die sie ausführen
tcooc
3
Kann jemand bitte erklären, was dieser Code tut? .. 86 Upvotes und ich habe keine Ahnung, worum es in diesem Code geht .. Ich fühle mich dumm! ..
Lakshay