[解決済み] <noscript>タグの中にある<script>タグは何のためにあるのでしょうか?
2022-05-16 20:16:48
質問
最近、面白いデザインや内容のウェブサイトをquot;view source"することが多くなりました。その中の 1 つの Web サイトです。
スクエアスペース
というブロックがあり
<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>
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>
関連
-
[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] varキーワードの目的と、どのような場合に使用する(または省略する)べきですか?
-
[解決済み] javascript:void(0)」とは何ですか?
-
[解決済み] Node.jsのmodule.exportsの目的と使い方を教えてください。
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] scriptタグの中にCDATAセクションが必要なのはどんな場合ですか?
-
[解決済み] スクリプトタグ - 非同期と遅延
-
[解決済み】enctype='multipart/form-data'とはどういう意味ですか?
-
[解決済み】関数の前のエクスクラメーションマークは何をするのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vueにシンプルなメモ帳機能を実装
-
Vueのクラススタイルの使い方の詳細
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
JavaScriptのStringに関する共通メソッド
-
JavaScriptのgetElementById()メソッド入門