html中如何显示<script>本身
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中如何显示<script>本身相关的知识，希望对你有一定的参考价值。
在html中使用javascript<script>标签
在HTML5中script主要有以下几个属性：async，defer，charset，src，type，
async（可选）：
关键词：异步脚本，外部文件，立即下载；
当标签中包含这个属性时会立即下载脚本（外部文件），只对外部脚本文件有效，下载的同时可以进行页面的其他操作，下载完成后停止解析并执行，执行后继续进行解析，但不能保证执行顺序。
<script src="js/index2.js" async="async"></script>
defer（可选）：
关键词：延迟脚本，外部文件，延迟加载；
当标签中包含这个属性时，脚本可以再等到页面完全被解析或显示之后执行，只对外部文件有效，如果同时存在两个带有defer的脚本，由于延迟的原因，前者将会有限于后者执行。
<script src="js/index1.js" defer="defer"></script>
charset（可选）：
关键词：字符集
大多数浏览器已经忽略它的值了，所以很少有人使用。
src（可选）：
关键词：外部引用
表示需要引用的外部文件的地址。
type（可选）：
关键词：MIME（脚本语言的内容类型）
为保证最大限度的浏览器兼容，type的属性值主要时候用的依旧是text/javascript，如果没有写这个属性，其默认值仍然为text/javascript。
注意：在引用外部文件，标签中不要加入其它JS代码，浏览器在解析时，只会下载src引用的外部脚本文件，表中内嵌入的代码将会被忽略。
<script>标签的位置
通常，我们会把带有外部文件的的标签（包括CSS文件，JavaScript文件）的引用放在相同的位置，一般是在<head>标签里面。
但是在解析过程中一旦遇到多个JavaScript外部文件，就要等到所有的外部文件加载完成后，页面才能完全显示，所以通常我们会把它放在<body>标签里的底部，如下所示：
在上面中提到过<script>中有defer这个属性，但是由于在HTML5中提到过，HTML5会忽略嵌入脚本所设置defer属性，目前只有IE4~IE7还支持defer属性，IE8以后完全遵循HTML5的标准，所以把<script>放在<body>标签里的底部依旧是最佳选择。
引用外部文件的优点
利于维护：把所有的JavaScript的文件放在一起，不仅可以不触及HTML代码，而且更有利于开发者进行代码的编写和维护。
加速浏览：如果有多个HTML页面引用了同一个JavaScript外部文件，这个文件只会加载一次（缓存），也就是说可以加快页面的加载速度。
安全性：引用外部文件，如果用户查看HTML代码，将不会看到JavaScript的代码，比写在标签内安全性更高一些。
<noscript>标签
字面意思，NO-script，没有script，也就是浏览器不支持JavaScript时，<noscript>标签中内容才会被显示，
浏览器不支持脚本；
浏览器支持脚本，但是JavaScript被禁用；
以上两条符合任何一个，<noscript>标签内的内容都会被显示。
上图页面，给用户了一个信息，当浏览器不支持或禁用JavaScript是才会被显示，否则用户将永远不会看到，并且不会影响页面其他元素的显示。 参考技术A 向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator2中首先实现。后来，这个元素被加入到正式的HTML规范中。HTML4.01为<script>定义了下列6个属性。
1.async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
2.charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
3.defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
4.language：已废弃。
5.src：可选。表示包含要执行代码的外部文件。
6.type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。
使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。
在使用<script>元素嵌入JavaScript代码时，只需为<script>指定type属性。然后，向下面这样把javaScript代码直接放在元素内部即可：
<script type="text/javascript">
function fun()
alert("Hello world!");
</script>
包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。当解释器对<script>元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。
如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部javascript文件的链接，例如：
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
需要帮助使用 java-script 在 html 文件中显示 XML 内容
【中文标题】需要帮助使用 java-script 在 html 文件中显示 XML 内容【英文标题】：Need help displaying XML content in html file with java-script 【发布时间】：2020-06-22 05:22:00 【问题描述】：这是我的 xml 代码。我想用 Javascript 在 html 页面中显示内容。
<businesses>
<business bfsId="" id="41481">
<advertHeader>Welding Supplies, Equipment and Service Business</advertHeader>
<Price>265000</Price>
<catalogueDescription>Extremely profitable (Sales £500k, GP £182k) business</catalogueDescription>
<keyfeature1>
Well established 25 year business with excellent trading record
</keyfeature1>
<keyfeature2>
Consistently high levels of turnover and profitability over last 5 years
</keyfeature2>
</business>
<business bfsId="" id="42701">
<broker bfsRef="1771" ref="003">Birmingham South, Wolverhampton & West Midlands</broker>
<tenure>freehold</tenure>
<advertHeader>Prestigious Serviced Office Business</advertHeader>
<Price>1200000</Price>
<reasonForSale>This is a genuine retirement sale.</reasonForSale>
<turnoverperiod>Annual</turnoverperiod>
<established>28</established>
<catalogueDescription>This well-located and long-established serviced office</catalogueDescription>
<underOffer>No</underOffer>
<image1>https://www.business-partnership.com/uploads/business/businessimg15977.jpg</image1>
<keyfeature1>other connections</keyfeature1>
<keyfeature2> Investment Opportunity</keyfeature2>
<keyfeature3>Over 6,000 sq.ft.</keyfeature3>
<keyfeature4>Well-maintained </keyfeature4>
<keyfeature5>In-house services & IT provided</keyfeature5>
</business>
</businesses>
这是打印数据的html表格
<table id="MainTable"><tbody id="BodyRows"></tbody></table>
我找到了以下 javascript 代码来在 html 页面中显示 xml 内容。为每个<business> 元素打印每一行。对于<business> 下的子元素，有一列。
window.addEventListener("load", function()
getRows();
);
function getRows()
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "2l.xml", true);
xmlhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
showResult(this);
;
xmlhttp.send(null);
function showResult(xmlhttp)
var xmlDoc = xmlhttp.responseXML.documentElement;
removeWhitespace(xmlDoc);
var outputResult = document.getElementById("BodyRows");
var rowData = xmlDoc.getElementsByTagName("business");
addTableRowsFromXmlDoc(rowData,outputResult);
function addTableRowsFromXmlDoc(xmlNodes,tableNode)
var theTable = tableNode.parentNode;
var newRow, newCell, i;
console.log ("Number of nodes: " + xmlNodes.length);
for (i=0; i<xmlNodes.length; i++)
newRow = tableNode.insertRow(i);
newRow.className = (i%2) ? "OddRow" : "EvenRow";
for (j=0; j<xmlNodes[i].childNodes.length; j++)
newCell = newRow.insertCell(newRow.cells.length);
//x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
// var ah = getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue.getElementsByTagName("advertHeader")[0]
//var advertHeader = xmlNodes[i].childNodes[j].getElementsByTagName();
if (xmlNodes[i].childNodes[j].firstChild)
newCell.innerHTML = xmlNodes[i].childNodes[j].firstChild.nodeValue;
else
newCell.innerHTML = "-";
console.log("cell: " + newCell);
theTable.appendChild(tableNode);
function removeWhitespace(xml)
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1)
removeWhitespace(currentNode);
if (!(/\S/.test(currentNode.nodeValue)) && (currentNode.nodeType == 3))
xml.removeChild(xml.childNodes[loopIndex--]);
这个 javascript 代码有效。但是从 xml 代码中可以看出，每个 <business> 元素下的子元素数量是不同的。这是原始 xml 文件 https://alpha.business-sale.com/bfs.xml 。一些<business> 节点的子节点比其他节点多。所以我得到的结果是这样的
第一行有 5 列，第二行超过 10 列。
我想要
只显示特定的子节点，例如<advertHeader>； <Price>
和<catalogueDescription> 以便每一行显示相同数量的列
如果 <Price> 节点的值 的行
如何用这段代码做到这一点
【问题讨论】：
【参考方案1】：这段代码对我有用。这是完整的代码
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>XML display</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
h1,noscript
text-align: center;
#mainTable
max-width: 62.5em;
margin: auto;
border-collapse: collapse;
background-color: #fff;
#mainTable th, #mainTable td
padding: 0.5em;
border: 1px solid #999;
</style>
</head>
<body>
<h1> XML Display</h1>
<noscript>
<p>JavaScript is required for this project</p>
</noscript>
<script>
(function( d )
'use strict';
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('get', 'https://alpha.business-sale.com/bfs.xml', true );
xmlhttp.onreadystatechange = function()
if ( this.readyState === 4 && this.status === 200)
showResult( this );
;
xmlhttp.send( null );
function showResult( xmlhttp )
var xmlDoc = xmlhttp.responseXML.documentElement,
pr = xmlDoc.getElementsByTagName( 'Price' ),
ah = xmlDoc.getElementsByTagName( 'advertHeader' ),
cd = xmlDoc.getElementsByTagName( 'catalogueDescription' ),
minimumValue = 10000,
c, tl, thd, th, tb, tr, td;
tl = d.createElement( 'table' );
tl.setAttribute( 'id', 'mainTable' );
thd = d.createElement( 'thead' );
tr = d.createElement( 'tr' );
th = d.createElement( 'th' );
th.appendChild( d.createTextNode( 'Advert Header' ));
tr.appendChild( th );
th = d.createElement( 'th' );
th.appendChild( d.createTextNode( 'Price' ));
tr.appendChild( th );
th = d.createElement( 'th' );
th.appendChild( d.createTextNode( 'Catalogue Description' ));
tr.appendChild( th );
thd.appendChild( tr );
tl.appendChild( thd );
tb = d.createElement( 'tbody' );
tl.appendChild( tb );
d.body.appendChild( tl );
for ( var c = 0; c < pr.length; c ++ )
if ( Number( pr[c].textContent ) > minimumValue )
tr = d.createElement( 'tr' );
td = d.createElement( 'td' );
td.appendChild( d.createTextNode( ah[c].textContent ));
tr.appendChild( td );
td = d.createElement( 'td' );
td.appendChild( d.createTextNode( pr[c].textContent ));
tr.appendChild( td );
td = d.createElement( 'td' );
td.appendChild( d.createTextNode( cd[c].textContent ));
tr.appendChild( td );
tb.appendChild( tr );
td = d.getElementsByTagName( 'td' );
for ( c = 0; c < td.length; c ++ )
td[c].textContent = td[c].textContent.replace( /\amp;/g, '' );
( document ));
</script>
</body>
</html>
【讨论】：
以上是关于html中如何显示<script>本身的主要内容，如果未能解决你的问题，请参考以下文章