<script>标记在<noscript>标记内部有什么作用?

Agent.Logic_

最近,我在具有有趣设计和内容的网站上大举“查看源代码”。这些网站之一Squarespace<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,但无济于事。<script>标记包含在<noscript>元素中是否有某种目的,还是仅是不良HTML的示例?

澳洲航空94重型

我在他们的代码中进行了一些搜索,发现了以下代码片段(为了使代码更具可读性,我对其进行了清理):

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>标记具有ID #inline-deps,该ID在代码中(第3行)被引用,以异步方式和按需加载依赖项。

他们可能使用一个<noscript>元素,因为它使他们可以直接访问DOM元素,而不必将其放在字符串或注释中(我认为这特别糟糕,因为注释并不代表实际信息),然后对其进行解析。它还会阻止脚本和CSS样式的执行,直到专门加载为止。

我个人认为这是对<noscript>标签的滥用我什至不确定它是否是有效的HTML5代码。在可行的情况下,应使用其他方法,例如使用脚本加载器声明JavaScript对象中的依赖关系。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么<script>标记在此PHP页面上不起作用?

来自分类Dev

HTML <noscript>标记不起作用

来自分类Dev

<noscript>标记仅打印封闭的HTML

来自分类Dev

<noscript>标记中的内联C#

来自分类Dev

SyntaxError:未终止的字符串文字<script> ... </ script>标记在字符串变量中不起作用

来自分类Dev

SyntaxError:未终止的字符串文字<script> ... </ script>标记在字符串变量中不起作用

来自分类Dev

该标记在日食中表示什么

来自分类Dev

在Firefox中,为什么在运行NoScript或uBlock Origin时以这种方式呈现此页面(忽略noscript标记的内容)?

来自分类Dev

基本html标记在代码内

来自分类Dev

UITableView复选标记在滚动时消失

来自分类Dev

使用标记在javascript中“继续”?

来自分类Dev

口音标记在不同的地方

来自分类Dev

XML结束标记在自己的行上

来自分类Dev

如何让人类标记在地图上移动?

来自分类Dev

wbr标记在IE中不起作用

来自分类Dev

HTML标记在strings.xml中不起作用

来自分类Dev

锚标记在iPhone Safari中不起作用

来自分类Dev

href标记在Outlook 2013中不起作用

来自分类Dev

JavaScript删除标记在Mozilla中不起作用

来自分类Dev

CascadingAuthenticationState和NotFoundContent标记在Blazor中不起作用

来自分类Dev

日期的Docker标记在Gitlab中不再起作用

来自分类Dev

锚标记在Gridview中不起作用

来自分类Dev

<center>标记在IE中不起作用

来自分类Dev

脚本标记在html文档中不起作用

来自分类Dev

使用noscript标记来跟踪禁用了JavaScript的访问者是否明智,因为noscript已弃用?

来自分类Dev

HTML-<page>标记在做什么?

来自分类Dev

rel =“ generator”标记在Wordpress中是什么意思?

来自分类Dev

视口元标记在 html 中究竟做了什么?

来自分类Dev

如何使用Kuchiki获取HTML文档的所有文本(脚本/样式/ noscript标记除外)?

Related 相关文章

  1. 1

    为什么<script>标记在此PHP页面上不起作用?

  2. 2

    HTML <noscript>标记不起作用

  3. 3

    <noscript>标记仅打印封闭的HTML

  4. 4

    <noscript>标记中的内联C#

  5. 5

    SyntaxError:未终止的字符串文字<script> ... </ script>标记在字符串变量中不起作用

  6. 6

    SyntaxError:未终止的字符串文字<script> ... </ script>标记在字符串变量中不起作用

  7. 7

    该标记在日食中表示什么

  8. 8

    在Firefox中,为什么在运行NoScript或uBlock Origin时以这种方式呈现此页面(忽略noscript标记的内容)?

  9. 9

    基本html标记在代码内

  10. 10

    UITableView复选标记在滚动时消失

  11. 11

    使用标记在javascript中“继续”?

  12. 12

    口音标记在不同的地方

  13. 13

    XML结束标记在自己的行上

  14. 14

    如何让人类标记在地图上移动?

  15. 15

    wbr标记在IE中不起作用

  16. 16

    HTML标记在strings.xml中不起作用

  17. 17

    锚标记在iPhone Safari中不起作用

  18. 18

    href标记在Outlook 2013中不起作用

  19. 19

    JavaScript删除标记在Mozilla中不起作用

  20. 20

    CascadingAuthenticationState和NotFoundContent标记在Blazor中不起作用

  21. 21

    日期的Docker标记在Gitlab中不再起作用

  22. 22

    锚标记在Gridview中不起作用

  23. 23

    <center>标记在IE中不起作用

  24. 24

    脚本标记在html文档中不起作用

  25. 25

    使用noscript标记来跟踪禁用了JavaScript的访问者是否明智,因为noscript已弃用?

  26. 26

    HTML-<page>标记在做什么?

  27. 27

    rel =“ generator”标记在Wordpress中是什么意思?

  28. 28

    视口元标记在 html 中究竟做了什么?

  29. 29

    如何使用Kuchiki获取HTML文档的所有文本(脚本/样式/ noscript标记除外)?

热门标签

归档