原生JS（2）<script>标签

来源：互联网发布：windows 批处理 pdf 编辑：程序博客网时间：2024/05/20 03:37

（五）script标签

【1】标签在创建的时候可以赋予六（七）个属性（都是可选）；

①src：最重要的属性，表示链接外部的js代码文件，如果引用外部js文件的话就需要添加这个属性。附带效果，添加这个属性后的script标签内部的代码将无效。

②async：表示应该立即下载脚本，但不应妨碍页面中的其他操作，只适用于外部脚本（加载的js文件）

示例：

<script src="test.js" async="async"></script>

说明：

（1）异步加载，举例：

<script src="test.js" async="async"></script><script>    alert("2");</script>

会先执行alert(“2”)，再提示test.js的alert(“1”)

如果不加这个属性的话，会先1后2

③defer：其效果是在页面加载完后再加载执行js文件，但仅限于对外部文件，对内部的js代码是无效的。

④charset：通过此属性来指定代码的字符集，不过现在默认都是utf8，而且大多数浏览器会忽略，基本不用。

⑤type：目前默认都是text/javascript。表示编写代码的脚本语言的内容类型。

⑥language：废弃

这是W3SCHOOL的说明：

表格：

属性

HTML4

HTML5

备注

type

需要

可选

虽然HTML5可以不加，但个人觉得为了兼容性还是加上这个属性比较好

async

无

新增

外部文件专用

xml:space

有

不支持

因此不用

charset

有

非特殊情况不加

src

外部文件需要

最重要的属性

defer

有

外部文件专用，加载完后执行js文件

【2】有意思的问题：

① 假如通过document.createElement(“script”)来动态创建一个script标签在head部分或者body部分，然后将js代码通过innerHTML的方法写入其中，那么，这段js代码会不会执行

答：不会被执行

② 以下代码会发生什么情况：

<script>        console.log("</script>");</script>

答：输出

")

然后报错。解决办法：使用<\/script> 作为替代

【3】在html文档里，不要用<script xxxxx />这种写法，原因是在IE或者其他浏览器里很可能不兼容，是XHTML的写法。

【4】script标签，可以加载来源于外部域的js文件。

举个例子，我本地html文件，可以加载来源于百度或者其他地方的某个js文件。但需要添加http://

潜在问题是，对方必须可信，否则你可能遇见恶意代码。

【5】标签的加载改善：

① <script></script>标签的位置，一般放于</body>标签的前方，可以减少空白页面出现的时间，从而让用户感觉页面加载速度提升了。

② 或者添加defer=”defer”属性。假如有两个这样的标签A和B，且A前B后。我们期望顺序是：DOMContentLoaded事件——》A标签js代码——》B标签js代码。但我查的几个资料，说法有所区别。

l 在JavaScript高级程序设计（第三版）中，提到假如有多个延迟脚本，那么延迟脚本的顺序不一定按期望顺序执行，因此推荐只用一个延迟脚本。

l 但在http://ued.ctrip.com/blog/script-defer-and-async.html，这个文章中，他提到async属性的脚本会在加载完后立刻执行，顺序不确定，而延迟脚本的顺序是确定的。

l 个人倾向于后者是对的，因为在书上的小结里，又提到“延迟脚本总是按照指定他们的顺序执行”。

③ 多个JS文件之间有前后依赖关系的情况下，不要使用async属性。

④ 只在外部文件中使用defer，在内部文件不要使用，在IE6情况特殊，IE7、8会延迟在底部，Firefox中无效（估计chrome也无效）

⑤ 异步脚本一定会在页面的load事件之前执行，但可能在DOMContentLoaded事件之前或之后执行。

【6】noscript标签

当浏览器不支持javascript脚本，或者是浏览器支持脚本但禁用了脚本功能时，我们需要做一些特殊的处理，比如说告诉用户你需要启用javascript脚本之类。

具体办法是，使用<noscript></noscript>标签，这个元素可以包含能够出现在文档<body>中的所有元素（除script标签）。

我用百度首页来举例，在百度首页中，其内容如下：

<noscript>    <meta http-equiv=refresh content="0; url=http://www.baidu.com/baidu.html?from=noscript"></noscript>

他会跳转到另外一个页面，而这个页面是没有js代码的。

具体原理我不太明白，但是效果是：刷新页面，然后跳转到url=xxxx的页面下。

0 0