全面了解js中的script标签

在页面中用script标签引入javascript文件（<script type="text/javascript" src="js文件地址"></script>），浏览器在渲染页面的时候，当读取到script元素时，浏览器不会以HTML或XHTML的方式处理其内容，浏览器会通知浏览器的脚本引擎来接管script元素中的内容。

script元素的type属性定义脚本类型，type类型有：

1.text/ecmascript(表示以ECMAScript方式解析这段脚本,即基于ECMA-262脚本标准)

2.text/jscript(表示以JScript方式解析这段脚本，它是微软在IE浏览器中所实现的ECMAScript语言的一种变种)

3.text/vbscript

4.text/vbs

(3、4种表示以微软的VBScript方式处理，是完全不同的脚本语言)

script元素的language属性（早期的script标签中用其属性来解决浏览器兼容问题）：

<script type="text/javascript" src="a.js" language="javascript1.2"></script>

language定义支持该脚本的浏览器版本（即浏览器支持javascript1.2，则就执行a.js文件中的代码）

script元素的defer属性：

<script type="text/javascript" src="a.js" language="javascript1.2" defer="defer"></script>

defer属性设置成"defer"，表示该脚本不会生成任何文档内容，于是浏览器可以提前处理页面的剩余部分，在页面处理结束并做好显示准备时才处理脚本部分。

script标签在页面中放的位置。

浏览器从同一个域名并发载入的资源是有限制的，所以当把脚本添加到head元素中时，首先载入的将是脚本，其次才是文档的剩余部分。为什么说，把引入了javascript的script元素标签放在head中可能会使得浏览器延迟页面剩余部分的显示？主要是因为脚本中可能会调用document.write方法修改dcument对象。

参考：《Javascript学习指南》

以上这篇全面了解js中的script标签就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript正则表达式匹配 div style标签

    测试字符串: <style>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </style> abcdefg <style> @font-face { font-family: Wingdings; } @font-fac

  • 使用JavaScript为Kindeditor自定义按钮增加Audio标签

    流程比较简单,主要有以下步骤: 注册插件(按钮.Lang.htmlTags.插件脚本) 基于media插件代码修改 注册插件 首先,全局配置kindeditor参数: KindEditor.lang({ audio : 'MP3' }); KindEditor.options.htmlTags['audio'] = ['src','controls','autoplay','type']; KindEditor.options.htmlTags['source'] = ['src','contr

  • javascript获取select标签选中的值

    复制代码 代码如下: var obj = document.getElementById("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式 复制代码 代码如下: $('#testSelect

  • javascript实现标签切换代码示例

    两则代码都很简单,这里就不多废话了,直接上代码 代码1, function ntabs(thisObj,Num) {if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.len

  • Javascript随机标签云代码实例

    Javascript随机标签云代码实例

    先来看一下效果 代码如下 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>随机标签云</title> <style type="text/css"> *{ margin:0; padding:0 } a{ text-decoration:none } #wrap{ width:400px; margin:auto

  • 教你用javascript实现随机标签云效果_附代码

    教你用javascript实现随机标签云效果_附代码

    标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽管不那么准确.此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容.   大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了.   下面我们大概说一下

  • javascript实现不同颜色Tab标签切换效果

    javascript实现不同颜色Tab标签切换效果

    本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下 具体代码: <html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css">

  • 全面了解js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容. script元素的type属性定义脚本类型,type类型有: 1.text/ecmascript(表示以ECMASc

  • JavaScript中输出</script>标签的方法

    JavaScript中输出</script>标签的方法

    在JS里弹出'</script>'会让JS误以为这是一个结束标签,而出现异常. 如以下代码 我们在<script>块内使用alert弹出'</script>'字符串,结果被误以为是结束标签,VIM还变了颜色.运行结果 由于把字符串里的当成了结束标签,所以就出现异常,显然这不是我们想要的结果.我们只需要把代码稍加处理一下即可实现. 在'</script>'里使用加号链接字符串,'</scr'+'ipt>'再来看下运行结果 程序正常,正确弹出字符串'

  • 浅谈js中几种实用的跨域方法原理详解

    浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

  • Script标签与访问HTML页面详解

    Script标签与访问HTML页面详解

    复制代码 代码如下: <img src="1_ender1000.jpg" id="img2" alt="" onclick="alert('onclick');" onmouseover="this.src='1_yylklshmyt20090217.jpg'" title="反转图片" />    <script type="text/javascript

  • 浅谈原生JS中的延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当浏览器解析到</html> 标签后才会执行代码.在HTML5规范中,defer属性中适用于外部脚本. 而家了defer  的脚本文件会比DOMContentLoaded事件触发前执行. 二.异步脚本 async HTML5为<script>添加了个async属性.这个属性与defer属

  • js中作用域的实例解析

    首先,要了解一下作用域的概念:作用--读.写,域--范围或空间.作用域:可用来进行读.写操作的范围或者空间. 其次,再来看看浏览器读取js文件(script标签内的内容)的步骤. 第一步:预解析-----根据var function 把可能用到的参数或函数找出来,放在内存里(这相当于放到仓库里面) 例1: <script> alert(a) var a=1 function fn1(){alert(2)} </script> 根据var和function可以找到:a  fn1 预解

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 浅谈js script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端. 细节问题:在多对的script标签中如果有相同的函数,那它们相互之间是不会受影响的,在第二对script标签中声明变量或者是创建函数,在第一对script标签中是无法访问到的,这就说明了,javaScript的预解析只会在各自的script标签中发生,同时,第

  • 浅析script标签中的defer与async属性

    浅析script标签中的defer与async属性

    一.前言 看到的前辈写的代码如下 <script src="#link("xxxx/xx/home/home.js")" type="text/javascript" async defer></script> 竟然同时有async和defer属性,心想着肯定是前辈老司机的什么黑科技,两个一块儿肯定会发生什么神奇化学反应,于是赶紧怀着一颗崇敬的心去翻书翻文档,先复习一下各自的定义. 二.调查一番 先看看async和defe

  • javascript 获取url参数和script标签中获取url参数函数代码

    url paramter: 复制代码 代码如下: //lastest: var getArgs=function() {//get url querystring var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);

随机推荐