JavaScript中的noscript元素属性位置及作用介绍_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

JavaScript中的noscript元素属性位置及作用介绍_javascript技巧

May 16, 2016 pm 05:37 PM

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 との互換性の問題を解決するために、二重スラッシュコメントが追加されています。
5.
ブラウザが Javascript をサポートしていない場合、または Javascript が無効になっている場合は、ページに
が含まれている場合でも、
に含まれる要素が表示されます。 <noscript> ですが、その内容は表示されません。

以下に示すように: コードをコピーします

 コードは次のとおりです:

 
&lt ;html<head> 
<title></tilte> 
<script type=”example.js” defer=”defer”/> 
</head> 
<body> 
<p> このページでは、ブラウザが Javascript をサポートしている (有効になっている) 必要があります。 </p> 
</noscript> 
</html> 

 

無効なメッセージ。スクリプト対応のブラウザでは、それがページの一部であっても、ユーザーには決して表示されません。

コードをコピーコードは次のとおりです。

<html> head> 
<title>HTML ページの例 
<body> 
<center><p style= "color: red; font-size:26px;">このページでは、JavaScript をサポート (有効にする) する必要があります</p></center> 
</noscript>ここにコンテンツを入力します- -> 
<script type="text/javascript"> 
</body> ;/html> 

コードをコピーします

コードは次のとおりです:

<html> <head> <title> <body> ><center>< p style="color:red; font-size:26px;">このページでは、ブラウザが JavaScript をサポート (有効にする) する必要があります</p></center> noscript> < -- ここにコンテンツを入力 --> </script> ></body>

</html>

 
上記のコードの <p> の内容が表示されます。ブラウザはスクリプトをサポートしていません
•ブラウズ サーバーはスクリプトをサポートしていますが、スクリプトは無効になっています。 

さらに、ユーザーはブラウザで <noscript> タグ内のコンテンツを表示することはありません。 


6. 概要
 
XHTML に Javascript を挿入するには、<script> 要素を使用します。この要素を使用して Javascript を XHTML ページに埋め込み、スクリプトとマークアップを組み合わせて、外部 Javascript ファイルを含めることもできます。注意する必要があるのは次のとおりです: 
1. どちらの方法でも、JavaScript スクリプト言語が使用されていることを示すために、type 属性の値が text/javascript に設定されている必要があります。 
2. 外部 Javascript ファイルを含める場合は、src 属性を対応するファイルを指す URL に設定する必要があります。このファイルは、それを含むページと同じサーバー上にあるファイルにすることも、他のドメインにあるファイルにすることもできます。 
3. すべての <script> 要素は、ページ上に出現する順序で解析されます。次の <script> コードは、前の <script> コードが解析された後にのみ解析されます。 <BR>4. ブラウザは、後続のページ コンテンツをレンダリングする前に、まず前の <script> 要素のコードを解析する必要があります。このため、&lt;script&gt; 要素は通常、ページの最後、ページ コンテンツの後、終了タグ &lt;/body&gt; の前に配置されます。 <BR>5. IE と Firefox では、ドキュメントのレンダリング後にブラウザーがスクリプトを実行できるように defer 属性を設定できます。他のブラウザはこの属性をサポートしていません。 </script>

または、<noscript> 要素を使用して、スクリプトをサポートしていないブラウザに表示される代替コンテンツを指定します。ただし、スクリプトが有効になっている場合、ブラウザは <noscript> 要素内のコンテンツを表示しません。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn