javascript - What purpose does a <script> tag serve inside of a <noscript> tag? -


i've been on "view source" spree lately on websites interesting design , content. 1 of websites, squarespace, has blocks of <script> tags inside of <noscript> tag, so:

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

it struck me odd, , got me googling info see if there's kind of hidden functionality/purpose such odd bit of html, no avail. there kind of purpose having <script> tags inside of <noscript> elements, or example of bad html?

i did searching through code , found snippet (i've cleaned make more readable):

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) {     (var = 0; < 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-"];      (var = 0; < styles.length; i++) {       var style = styles[i];       if (style.href.indexof("fonts.css") !== -1) load(style, webfontsready);       if (islisted(style.href, stylewhitelist)) load(style);     }      (var = 0; < 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) {       (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);         }       }     }      (var = 0; < 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() {       (var = 0; < inline.length; i++) {         if (inline[i].getattribute("data-sqs-type") !== "dynamic-assets-loader") {           load(inline[a]);         }       }        (var = 0; < 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 }; })(); 

as can see, <noscript> tag has id #inline-deps, referenced in code (line 3) load dependencies asynchronously , on-demand.

they use <noscript> element allows them directly access dom elements, instead of having place in string or comment (which consider particularly bad, comments not meant actual information) , parse it. prevents execution of scripts , css styles until loaded.

i find abuse of <noscript> tag. i'm not sure if it's valid html5 code. using other methods such declaring dependencies in javascript object script loader should used practicable.


Comments

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -