`

JavaScript与HTML的Script标签

阅读更多

JavaScript与HTML的Script标签

<script>标签

script标签有两种用途:

  • 1. 在页面中标识一块脚本代码
  • 2. 加载一个脚本文件

它要依赖于src属性的存在。上面两种情况都需要</script>闭合标签。

script标签可以包含下面的属性:

src=”url”

src属性是可选的。如果存在src属性,它的值应是一个url(网址)表示的.js文件。当浏览器加载,编译与执行文件时,页面将停止装载与处理。<script src="url">与</script>之间不应有任何内容(保持空白)。

如果没有src属性,<script>与</script>之间的文字可被编译与执行。script不能包含序列

</

因为可能与</script>混淆。可以插入反斜线符号在<与/之间避免此问题。

</\

反斜线将被JavaScript编译器忽略。

不要使用<!– //–>这种hack脚本。这种方法可以阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字。已经有很长时间不需要这么做了。<!– //–>是一个HTML注释。注释中的脚本将被忽略,不被编译与执行。同样,HTML注释不包括–,因此脚本将忽略HTML错误。

language=”javascript”

这个属性是不赞成使用的。它被用于选择其它的程序语言或特殊版本的JavaScript。尽量避免使用。

type=”text/javascript”

这个属性是可选的。自从Netscape 2所有浏览器默认的编程语言已经都是JavaScript了。在XHTML中,这个属性是必须的。在HTML中最好不要使用此属性。浏览器可以自行解决。

defer

这个属性试图改变组件在页面中的加载时机。它不能被很好的支持,不要使用此属性。

for=”name” event=”name”

这些属性是微软(Microsoft)的私有属性,用于声明事件句柄。这是不标准的。尽量避免使用。

放置(Placement)

<script src="url"></script>将阻碍页面的其它组件下载,直到script脚本加载、编译、执行完毕。因此越晚调用脚本越好,以便加载图像和其它组件不被延时。 加载脚本将增加感觉中的与实际的页面加载时间。因此通常最好把所有的<script src="url"></script>放置在</body>之前。一个页面内的<script>在加载时没有明显的影响。

如果一个脚本定义了一些用于其它函数的函数与数据,那么必须在用这些函数与数据之前完成定义。因此定义脚本后才可以使用脚本。

document.write

document.write提供了一种将字符串写入HTML页面的方法。有更好的方法这样做,例如.innerHTML和.createElement或者HTML克隆样式(HTML cloning patterns),用于避免使用document.write。

document.write强制性的依赖于加载时机。如果document.write在onload事件前被调用,它会在一个页面中附加或插入文字。如果在onload事件后被调用,它将完全替换页面,摧毁前面完成的所有内容。

document.write使脚本与标记混合起来,助长了坏的结构。清晰的结构尽少使脚本与标记混合使用。

脚本标签骇客

令人惊讶的是src属性不被同源策略(Same Origin Policy)约束。这意味着一个脚本元素可以产生于任何服务器并且加载脚本与执行脚本。如果脚本引发JSON 编码的数据传送,这是很有用的。不幸的是没有方法可以在执行前限制与检查脚本。它同页面的其它脚本一样有权利运行。脚本能存取与使用自带的小甜饼(cookies)。它可以存取原始服务器信息用于用户的授权。它可以检查DOM或JavaScript全局对象(global object),而且可以为世界上的任何地方发送信息。脚本骇客标签(Script Tag Hack) 是不安全的并且应该避免使用。

 

作者: 可爱的猴子
原载: 可爱的猴子的blog
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
分享到:
评论

相关推荐

    【第七章】JavaScript【Script标签与访问HTML页面(1)】

    【第七章】JavaScript【Script标签与访问HTML页面(1)】

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    HTML页面不认标签,怎么办?

    HTML页面不认&lt;script type="text/template"&gt;标签,怎么办? 比如 &lt;script type="text/template"&gt; ... &lt;/script&gt; 以上代码,HTML浏览器不能解析,报错. 怎么办? 我来教给你如何变相的让他认这个type.

    Vue中通过<script></script>引入的Vue.js文件

    我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 &lt;script&gt; 标签引入。 格式就是: &lt;script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt; src里面的内容根据自己的下载的Vue.js的...

    HTML5 对各个标签的定义与规定:script

    script 标签用于定义客户端脚本,比如 JavaScript。 除全局属性之外有如下属性 src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中) async 定义脚本...

    向html中加入指定的javascript "src"的perl脚本

    命令adjssrc: 用一个简单的命令向html文档中加入你指定的javascript源,比如在命令行中运行adjsscr a.html b.js, 在html文档的标签的下一行就会自动加入&lt;script type="text/javascript" charset="utf-8" src="b.js"&gt;...

    全面了解js中的script标签

    在页面中用script标签引入javascript文件([removed][removed]),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的...

    Web前端开发技术-JavaScript代码编写.pptx

    外部式(外链式):将JavaScript代码写在一个单独的文件中,一般使用“js”作为文件的扩展名,在HTML页面中使用&lt;script&gt;标签进行引入,适合JavaScript代码量比较多的情况。注意外部式的&lt;script&gt;标签内不可以编写...

    计算机病毒与防护:JavaScript基础.ppt

    * * * * * * * * * * JavaScript基础 HTML: ... JavaScript简介 JavaScript标签 JavaScript 在 html 页面的位置如在&lt;script&gt;标签中 eg:&lt;script&gt;document.write(“Hello World!”)&lt;/ script &gt; JavaScript脚本使用 ale

    JavaScript动态添加css样式和script标签

    [动态添加css样式] &lt;html&gt;  &lt;head&gt;  [removed]  [removed]=function(){  var head=document.getElementsByTagName('head')[0];... //创建link元素节点,也就是link标签  link.rel="stylesheet"; 

    javaScript基础

    2. 在html页面中引用javaScript有三种方式:直接把javaScript代码写在标签script和/script结束标签之间,使用外部javaScript文件或直接把简短的javaScript代码写在html标签中 3. javaScript的核心语法有变量的声明和...

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

    向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余...

    javascript实现去除HTML标签的方法

    本文实例讲述了javascript实现去除HTML标签的方法。分享给大家供大家参考,具体如下: [removed] String.prototype.stripHTML = function() { var reTag = /&lt;(?:.|\s)*?&gt;/g; return this.replace(reTag,"...

    javascript通过获取html标签属性class实现多选项卡的方法

    本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt...

    超强JS(javascript)正则类

    超强JS(javascript)正则类 可提取HTML文件标签 //JS正则表达式类====================// /* 方法列表 */ //=================================// /* GetTag(string,tag); */ //=====================...

    nodejs 解析html根据标签提取需要合并的js、css,并且更新html

    标签合并区域内的js或者css,并且更新html区域内合并之后的script、link标签;可以打包成执行文件,需要开发环境的依赖。 &gt; 运行前需要新建config.json的配置的目录:output_path、tmp_js_json_dir、tmp_css_json_...

    JavaScript-AngluarJs.pdf

    AngularJS [1] 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是 一款优秀的前端 JS 框架,...&lt;script&gt; 标签添加到 HTML 页面。 [2] AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 H

    用于 HTML5 画布标签的 Javascript 图像过滤器库_JavaScript_代码_相关文件_下载

    &lt;script type="text/javascript" src="imagefilters.js"&gt;&lt;/script&gt; 每个过滤器都将 ImageData 作为第一个参数,并始终返回修改后的副本。下面是一个基本的例子。 更多详情、使用方法,请下载后阅读README.md文件

    JavaScript详解(第2版)

    2.2.5 〈script〉标签   2.3 生成HTML 并输出显示   2.3.1 字符串及字符串串联   2.3.2 write()及writeln()方法   2.4 关于调试   2.5 调试工具   2.5.1 Firefox   2.5.2 在Internet ...

    JavaScript源代码集

     在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面,此时看看浏览器下的状态列有何结果,然后这样的功能我们可以与JavaScript的功能相结合。怎样做到的呢 以下就是这一个连结的...

Global site tag (gtag.js) - Google Analytics