JavaScript是如何被web浏览器执行的?



当URL返回包含<script>标记的HTML文档时,浏览器如何知道将它们作为JavaScript执行?这是唯一用于web文档的脚本语言吗?

以下内容似乎会变成一个弹出窗口,要求您接受cookie,因为这是web浏览器中显示的内容。

内容从何而来?此代码中没有任何文本。

<script>
(function (w, d, s, o, f, js, fjs) {
w['GlobalLinkAppSwitcherObject'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'glas', '/lib/app-switcher.js'));
</script>
<link rel="stylesheet" href="styles.96c2b80f07feb01560fd.css"></head>
<body>
<gl-root>
<svg class="t-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.5 93.65">
<path class="path"
d="M100.84,7c-0.51-.67-2.07-0.07-2.07-0.07-8.56,4.78-12.55,5.18-20.32,5.18-7.57,0-15.14-2.59-30.87-7C33,1,14.31-3.82,4.15,11.52,0.37,17.1-.23,24.47,3.56,30.24,11.92,43,42,41,42.2,40.6c0.2-.2-8.37,14.34-9.16,27.09C32,85.22,47.58,98,64.51,91.39,75.06,87.41,86,77.05,88,65.5c1.2-6.77-2-14.74-8.37-17.13C70.48,45,59.93,52.55,56.74,60.52c-2,3.65,1.55,4.14,2.34,2.75,4.78-8.17,19.54-17.41,22.56-6.13,2,11.35-10,29.08-22.11,31.27A15.72,15.72,0,0,1,47,85.22c-7.77-6.17-6.77-16.93-3.78-25.3a54.76,54.76,0,0,1,3-7.17c1.59-3.59,3.39-7,5.18-10.36,1.2-2.19,2.79-2,5.18-2.39a37.08,37.08,0,0,0,13.54-4.78c3-1.85,1.42-2.79-.6-2.59-0.4,0-8,1.59-14.74,2.59,4.78-6.77,6.57-10,9.36-13.35a0.44,0.44,0,0,0-.6-0.6l-8.56,1s-6,7.57-9.36,12.55c-27.09,1.2-34.86-5-35.26-12.75-0.4-7.57,5.58-11.15,11-11.35,7-.4,6.37.8,19.72,4.18,9.16,2.39,14.74,3.19,26.29,3.19,13.54,0,21.11-1.39,31.47-8,0,0,2.19-1.39,2.19-2.19A1.13,1.13,0,0,0,100.84,7"
transform="translate(-0.25 -0.25)" stroke-miterlimit="5" stroke-width="1.5"></path>
</svg>
<link rel="stylesheet" href="static/stylesheets/loading.css">
<script src="static/scripts/ui-theme.js"></script>
</gl-root>
<script src="runtime.78fd4cc3a2c35677081c.js" defer></script><script src="polyfills-es5.cb894d6fcebf9736e607.js" nomodule defer></script><script src="polyfills.349fb10ac8f5745e4f6d.js" defer></script><script src="scripts.7082b964d45d1472df25.js" defer></script><script src="main.60a9e3371618bc1afd3d.js" defer></script></body>

脚本标签的语言可以通过type属性指定,尽管今天你很少看到使用任何其他语言,因此默认情况下JS是用于执行脚本的默认语言。

要理解这些文本来自哪里,让我们检查一下标签之间的脚本:

(function (w, d, s, o, f, js, fjs) {
w['GlobalLinkAppSwitcherObject'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'glas', '/lib/app-switcher.js'));

首先,它定义并立即调用一个函数:

(function (w, d, s, o, f, js, fjs) {
...
}(window, document, 'script', 'glas', '/lib/app-switcher.js'));

可以看到,该函数接受7个参数,这些参数在脚本的最后一行提供,因此w将是window,d将是document,s将是字符串"script",等等。让我们看看这个函数在做什么:

...
// since w is window, it is defining a property on the window object
// that equals o, if we go back to the parameters passed in we see that 
// o is the string "glas"
w['GlobalLinkAppSwitcherObject'] = o; 
// here it is defining a property "glas" on the window object if it
// does not exist, which is a function, which defines a property q on
// itself which is an array of the passed arguments. It appears unused 
// but is probably used later on.
w[o] = w[o] || 
function () { (w[o].q = w[o].q || []).push(arguments) };
// here a variable js is declared and is assigned a new DOM element,
// looking back at the provided parameters, we see that s is the string  
// "script", so it is basically creating a new script tag
js = d.createElement(s),
// creating a new variable fjs, getting the first "script" element
// in the document
fjs = d.getElementsByTagName(s)[0];
// here it is defining a bunch of attributes on the js script tag
js.id = o;
// the src attribute specifies the location of the script,
// so looking back at the provided parameters, f is the string
// "/lib/app-switcher.js", which is where you can find the code
// which will be executed. It is a relative address so that
// means it is hosted under the same domain
js.src = f; 
js.async = 1;
// and is finally prepending it using the first script tag on the page
fjs.parentNode.insertBefore(js, fjs);
...

默认情况下,当一个新的脚本标签被添加时,它会被自动解析,所以本质上发生的事情是,这个脚本正在加载另一个脚本,你不知道它会做什么,你盲目地相信。

这很可能是你看到或没有看到的文本的来源。

相关内容

  • 没有找到相关文章

最新更新