<Noscript> टैग के अंदर <स्क्रिप्ट> टैग किस उद्देश्य से काम करता है?

Question

मैं दिलचस्प डिजाइन और सामग्री के साथ वेबसाइटों पर हाल ही में "दृश्य स्रोत" की होड़ में रहा हूं। उन वेबसाइटों में से एक, स्क्वरस्पेस , के <script>अंदर टैग के ब्लॉक हैं<noscript> , जैसे:

<!-- 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>
...
...

यह मुझे अजीब लगा, और मुझे यह देखने के लिए जानकारी मिली कि क्या इस तरह के एचटीएमएल के इतने अजीब बिट के लिए किसी प्रकार की छिपी हुई कार्यक्षमता / उद्देश्य है, लेकिन कोई फायदा नहीं हुआ। क्या तत्वों के <script>अंदर टैग होने का किसी प्रकार का उद्देश्य है <noscript>, या यह केवल खराब HTML का एक उदाहरण है?

Comments

IMHO कि कोई मतलब नहीं है और यह सिर्फ एक गलती है।

— सेबेस्टियन सी।

शायद जेएस को टिप्पणी करने का एक अजीब तरीका है।

— एलेक्सर

तथ्य यह है कि वे पूरी तरह से शीर्ष लेख है से आंकना (सहित <base href="">, <meta … />, <title>और <link … />तत्व) ऐसा लगता है कि वे का दुरुपयोग करते हैं <noscript>templating के लिए।

— बरगी

बड़ा अच्छा सवाल! लेकिन भयानक इसलिए क्योंकि आपने अब मेरे लिए एक और "व्यू सोर्स" की होड़ मचाई है .. मैं बस उस आदत से बाहर निकल आया हूँ!

— बोबो

@ याकूब: लेकिन, मैट्रिक्स के अंदर क्या होता है यह समझने के लिए कोड को देखना एक अच्छी बात है! ;)

— एजेंट

Answer 1

मैंने उनके कोड के माध्यम से कुछ खोज की और इस स्निपेट को पाया (मैंने इसे और अधिक पठनीय बनाने के लिए इसे साफ किया है):

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 };
})();

जैसा कि आप देख सकते हैं, <noscript>टैग में आईडी है#inline-deps , जो कोड (लाइन 3) में संदर्भित है अतुल्यकालिक और ऑन-डिमांड पर निर्भरता लोड करने के लिए।

वे शायद एक <noscript>तत्व का उपयोग करते हैं क्योंकि यह उन्हें DOM तत्वों को सीधे एक्सेस करने की अनुमति देता है, बजाय इसे एक स्ट्रिंग या एक टिप्पणी में रखने के लिए (जिसे मैं विशेष रूप से बुरा मानता हूं, क्योंकि टिप्पणियां वास्तविक जानकारी के लिए नहीं हैं) और फिर इसे पार्स करें। यह विशेष रूप से लोड होने तक स्क्रिप्ट और सीएसएस शैलियों के निष्पादन को भी रोकता है।

मुझे व्यक्तिगत रूप से यह <noscript>टैग का दुरुपयोग लगता है । मुझे यकीन नहीं है कि यह मान्य HTML5 कोड है। स्क्रिप्ट लोडर के साथ जावास्क्रिप्ट ऑब्जेक्ट में निर्भरता घोषित करने जैसे अन्य तरीकों का उपयोग करना चाहिए जहां व्यावहारिक हो।

Comments

उन कुटिल कोड हैकर्स;) मुझे उम्मीद है कि उन्होंने इसे अच्छी तरह से प्रलेखित किया, इससे पहले कि कुछ स्मार्ट आदमी ने इसे हटा दिया 'क्योंकि इसका कोई उपयोग नहीं है'।

— पैट्रिक हॉफमैन

मैंने <script type="text/html">...</script>एक ही उद्देश्य के लिए इस्तेमाल किया है - किसी को भी दो के पेशेवरों / विपक्ष मिला है?

— Shai

यह संभावना है कि अंदर कुछ भी <noscript>गैर-जावास्क्रिप्ट उपयोगकर्ताओं को दिखाई देगा; अधिकांश साइटें केवल उन उपयोगकर्ताओं का समर्थन नहीं करती हैं, लेकिन आप उन्हें एक सरल व्याख्यात्मक संदेश भी दिखाना चाहेंगे।

— कटान ३१४

यह कुछ असाधारण बुरे व्यवहार हैं जो वे कर रहे हैं

— tcooc

क्या कोई pls बता सकता है कि यह कोड क्या करता है? .. 86 upvotes और मुझे नहीं पता कि यह कोड क्या है .. मैं गूंगा महसूस कर रहा हूँ! ..

— Lakshay