<নোগ্রিপ্ট> ট্যাগের ভিতরে একটি <script> ট্যাগ কী উদ্দেশ্যে কাজ করে?

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

এটি আমার কাছে বিজোড় হিসাবে আঘাত করেছিল এবং এ জাতীয় HTML এর মতো বিদ্বেষের জন্য কোনও ধরণের লুকানো কার্যকারিতা / উদ্দেশ্য আছে কিনা তা দেখার জন্য আমার কাছে গুগল হয়ে উঠেছে but উপাদানগুলির <script>অভ্যন্তরে ট্যাগ থাকার কোনও ধরণের উদ্দেশ্য <noscript>রয়েছে, বা এটি কেবল খারাপ এইচটিএমএলের উদাহরণ?

Comments

আইএমএইচও যা কোনও অর্থ দেয় না এবং এটি কেবল একটি ভুল।

— সেবাস্তেয়েন সি।

সম্ভবত জেএসকে মন্তব্য করার জন্য কেবল একটি অদ্ভুত উপায়।

— অ্যালেক্সার

ওদের যে সম্পূর্ণ হেডার আছে থেকে বিচার করা যায় (তত্সহ <base href="">, <meta … />, <title>এবং <link … />উপাদানের) এটি দেখে মনে হচ্ছে তারা অপব্যবহারের হয় <noscript>টেমপ্লেট জন্য।

— বার্গি

দুর্দান্ত প্রশ্ন! তবে ভয়াবহ কারণ আপনি এখন আমার জন্য আরও একটি "ভিউ সোর্স" উত্সাহিত করেছিলেন .. আমি কেবল সেই অভ্যাস থেকে বেরিয়ে এসেছি!

— বোবো

@ বাবো: তবে, ম্যাট্রিক্সের অভ্যন্তরে কী ঘটে তা বোঝার জন্য কোডটি দেখাই ভাল জিনিস! ;)

— এজেন্ট

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>উপাদান ব্যবহার করে কারণ এটি স্ট্রিং বা মন্তব্যে (যা আমি বিশেষত খারাপ হিসাবে বিবেচনা করি, কারণ মন্তব্যগুলি প্রকৃত তথ্যের জন্য নয়) এর পরিবর্তে এটি সরাসরি ডোম উপাদানগুলিতে অ্যাক্সেসের অনুমতি দেয় এবং তারপরে পার্স করে। এটি স্ক্রিপ্টগুলি এবং সিএসএস শৈলীর সম্পাদনকে বিশেষভাবে লোড না করা পর্যন্ত বাধা দেয়।

আমি ব্যক্তিগতভাবে এটি <noscript>ট্যাগটির অপব্যবহার বলে মনে করি । এটি বৈধ এইচটিএমএল কোড কিনা তা আমি নিশ্চিত নই। স্ক্রিপ্ট লোডার সহ একটি জাভাস্ক্রিপ্ট অবজেক্টে নির্ভরতা ঘোষণা করার মতো অন্যান্য পদ্ধতি ব্যবহার করা উচিত যেখানে ব্যবহারিক।

Comments

Dev ছদ্মবেশী কোড হ্যাকার;)। আমি আশা করি তারা এটিকে ভালভাবে নথিভুক্ত করেছে, কিছু স্মার্ট লোক 'মুছে ফেলার আগে' এর কোনও ব্যবহার নেই '।

— প্যাট্রিক হফম্যান

আমি <script type="text/html">...</script>একই উদ্দেশ্যে ব্যবহার করতে দেখেছি - কেউ দু'জনের উপকার / ধারণা পেয়েছে?

— শাই

এটি সম্ভবত এমন যে <noscript>জাভাস্ক্রিপ্টহীন ব্যবহারকারীদের ভিতরে থাকা কোনও কিছুই দৃশ্যমান হবে; বেশিরভাগ সাইটগুলি কেবল সেই ব্যবহারকারীদের সমর্থন করে না, তবে আপনি তাদের কাছে একটি সাধারণ ব্যাখ্যামূলক বার্তাও দেখাতে চান।

— কাতানা 314

এটি কিছু অসাধারণ খারাপ অভ্যাস যা তারা সম্পাদন করছে

— tcooc

এই কোডটি কী করে কেউ কি দয়া করে ব্যাখ্যা করতে পারেন? .. 86 টি উক্তি এবং আমার এই কোডটি সম্পর্কে কোনও ধারণা নেই .. আমি বোবা বোধ করছি! ..

— লক্ষ্যা