JavaScript中的noscript元素属性位置及作用介绍
一、<script>元素属性
向XHTML页面中插入JavaScript的主要方法，就是使用<script>元素，该元素有5个属性分别为charset、defer、language、src、type，经常使用的是type、src、defer这三个。
1、type属性的值一般都是text/javascript，该属性是必须的,<script type=”text/javascript”/>。
2、src属性的值是*.js外部文件，该属性是可选的,<script type=”text/javascript” src=”example.js”/>。
在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只需包含通常要放在开始的<script>和结束的</script>之间的那些Javascript代码即可。与解析嵌入式Javascript代码一样，在解析外部Javascript文件时，页面的处理也会暂时的停止。需要注意的是带有src属性后就不应该在<script>和</script>之间再包含额外的Javascript代码。
3、defer属性的值是”defer”,表示脚本可以延迟到文档完全被解析和显示之后再执行，该属性是可选的，<script type=”text/javascript” src=”example.js” defer=”defer”/>
二、标签位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：
代码如下:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js”/>
</head>
<body>
</body>
</html>
现代Web应用程序一般都把全部Javascript引用放在<body>元素中，放在页面的内容后面目的是让用户感觉到页面加载速度快了，如下所示：
代码如下:
<html>
<head>
<title></tilte>
</head>
<body>
<!--内容-->
<script type=”text/javascript” src=”example.js”/>
</body>
</html>
三、延迟脚本
使用defer属性延迟脚本，这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后在运行。
代码如下:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
</body>
</html>
在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
四、CDATA
在XHTML(XML)中，CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。因此，在CData片段中就可以使用任意字符，而且不会导致语法错误。
代码如下:
<script>
// <![CDATA[
function compare(a,b){
if(a<b){
alert(“A is less than B”) ;
}else if(a>b){
alert(“A is greater than B”) ;
}else {
alert(“A is equal to B”) ;
}
}
//]]>
</script>
加入双斜线注释是为了解决浏览器不兼容XHTML的问题。
五、<noscript>元素
当浏览器不支持Javascript或者Javascript被禁用时，包含在<noscript>中的元素才会显示出来，否则得话尽管页面中包含<noscript>，但其中的内容并不会被显示。
如下所示：
代码如下:
<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)Javascript。</p>
</noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。
代码如下:
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本页面需要浏览器支持（启用）JavaScript</p></center>
</noscript>
<!-- 这里放内容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本页面需要浏览器支持（启用）JavaScript</p></center>
</noscript>
<!-- 这里放内容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>
在以下两种情况下，上述代码<p>标记中的内容会显示出来：
•浏览器不支持脚本
•浏览器支持脚本，但脚本被禁用。
除此之外，用户在浏览器中永远看不到<noscript>标记中的内容。
六、小结
把Javascript插入到XHTML中要使用<script>元素。使用这个元素可以把Javascript嵌入到XHTML页面中，让脚本与标记混合在一起；也可以包含外部的Javascript文件。而我们需要注意的有：
1、这两种方式都要求吧type属性的值设置为text/javascript，以表明使用的是Javascript脚本语言。
2、在包含外部Javascript文件时，必须将src属性设置为指向相应文件的url。而这个文件即可以好是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
3、所有<script>元素会按照他们在页面中出现的先后顺序依次被解析。只有在解析完前一个<script>代码后才会解析下一个<script>代码。
4、浏览器在呈现后面的页面内容之前，必须先解析完前面<script>元素中的代码。为此，一般要把<script>元素放在页面的末尾，放在页面内容之后和结束的</body>标签之前。
5、在IE和火狐中，可以通过设置defer属性让浏览器在呈现完文档之后再执行脚本。其他浏览器不支持该属性。
另外，使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。
相关推荐
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY
-
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
首先这个元素position为fixed top为(clientHeight-elem.offsetHeight)/2(即元素在浏览器的中间,这个是固定的) left为(clientWidht-主体宽度)/2+主体宽度+左边距,左边距可以设为正数,也可以为负数,如果为负数时的绝对值 等于 主体宽度+elem.offsetWidht,那么元素就刚好浮动在页面主体的左边,设置为0时,刚好浮动在页面主体的右边 但是万恶的ie6不支持css中fixed属性,好在ie6可以通过expresion表达式来解
-
用JavaScript获取DOM元素位置和尺寸大小的方法
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL
-
JavaScript DOM元素尺寸和位置
一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box'); // 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style获取只能取到行内style属性的CSS样式中
-
在JS数组特定索引处指定位置插入元素
很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他.最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) ar
-
JavaScript中计算网页中某个元素的位置
由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题.之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可. 那段代码一直都工作得很好,直到我知道了一个东西:iframe.iframe(普通的 frame 也是一样的,不过 frame 现在不太常见,这里只用 iframe 举例)中的内容被视为一个独立的网页,连 Window 对象也是和它的父级网页分开的.
-
在JS数组特定索引处指定位置插入元素的技巧
如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) array.splice(2, 0, "three"
-
js获取元素相对窗口位置的实现代码
JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + p
-
JS实现设置ff与ie元素绝对位置的方法
本文实例讲述了JS实现设置ff与ie元素绝对位置的方法.分享给大家供大家参考,具体如下: function Show_menu(liid,divid) { var li=document.getElementById(liid); var div=document.getElementById(divid); div.style.left=getLeft(li)+140+'px'; div.style.top= getTop(li)+'px'; var tt=div.style.top; div
-
Javascript中找到子元素在父元素内相对位置的代码
经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')
-
javascript实现拖动元素交换位置
本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height
-
JS实现随页面滚动显示/隐藏窗口固定位置元素
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel