Javascript 如果文件名取自用户，则不应用CSS规则
我正在尝试编写一个HTML/javascript程序，该程序接收文件名，解析文件并在表中显示其内容。我面临的问题是，如果我通过HTML表单将文件名作为用户输入，我的CSS规则将不会应用于我通过javascript创建的表，以显示解析的内容。但是如果我硬编码文件名，然后调用javascript函数，那么CSS规则就会得到应用。我不知道我会错在哪里 注：我也问过其他类似的问题，但都没有回答这个具体情况 最后，我还提供了一个示例XML数据。可以假定，XML标记名称和结构不会因不同的文件而有所不同 下面是html、javascript和css代码 HTML文件Javascript 如果文件名取自用户，则不应用CSS规则,javascript,html,css,Javascript,Html,Css,我正在尝试编写一个HTML/javascript程序，该程序接收文件名，解析文件并在表中显示其内容。我面临的问题是，如果我通过HTML表单将文件名作为用户输入，我的CSS规则将不会应用于我通过javascript创建的表，以显示解析的内容。但是如果我硬编码文件名，然后调用javascript函数，那么CSS规则就会得到应用。我不知道我会错在哪里 注：我也问过其他类似的问题，但都没有回答这个具体情况 最后，我还提供了一个示例XML数据。可以假定，XML标记名称和结构不会因不同的文件而有所不同 下面
<html>
<head>
<script src="loadxml.js" async></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="userPrompt">
<form>
<input type="text" id="filename"/><br><br>
<button onclick="callDOMHandler()">Submit Query</button>
</form>
</div>
<script type="text/javascript">
function callDOMHandler(){
//var filename = "xmlFileName.xml";
var file = document.getElementById("filename").value;
loadXMLDoc(file);
}
</script>
</body>
</html>
<Workbook>
<Worksheet>
<Table>
<Row>
<Data>Symbol</Data>
<Data>Name</Data>
<Data>HomePage</Data>
<Data>Logo</Data>
</Row>
<Row>
<Symbol>ABC</Symbol>
<Name>AbcBcdDef</Name>
<HomePage>http://www.homepage.com/</HomePage>
<Logo>http://imageURL.png</Logo>
</Row>
<Row>
<Symbol>XYZ</Symbol>
<Name>XyxYxzZxy</Name>
<HomePage>http://www.homepageURL.com/</HomePage>
<Logo>http://image.png</Logo>
</Row>
</Table>
</Worksheet>
象征
名称
主页
标志
基础知识
AbcBcdDef
http://www.homepage.com/
http://imageURL.png
XYZ
xyxzzxy
http://www.homepageURL.com/
http://image.png
该代码有几个问题。XML数据中缺少根元素结束标记可能只是一个复制粘贴错误。在
表单中使用按钮
会导致混乱，因为在调用onclick
处理程序后，表单会被提交，从而导致重新加载页面；使用按钮
标记中的type=“button”
可以防止这种情况。但主要问题是，您正在使用document.write（）
修改文档，并使用同步请求；关于后者，Chrome控制台显示以下警告：“主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验造成有害影响。有关更多帮助，请查看。”
代码在不同的情况下表现不同。详细分析这一点是困难的，也可能是徒劳的。不使用样式表的原因是document.write（）
在事件处理程序中执行时，会启动一个新文档，而新创建的文档缺少链接
元素。当文件名作为常量给出时，我无法解释为什么您观察到了一些不同的情况（我没有观察到）
最简单的解决方法是添加type
属性，并使JavaScript函数将表
标记构造为字符串（而不是使用document.write（）
）并将其作为值返回。然后，您可以让它的调用者简单地用从该值解析的元素替换文档正文内容
然后，HTML文件将是：
<!doctype html>
<html>
<head>
<script src="loadxml.js" async></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="userPrompt">
<form>
<input type="text" id="filename"/><br><br>
<button type="button" onclick="callDOMHandler()">Submit Query</butto\
n>
</form>
</div>
<script type="text/javascript">
function callDOMHandler(){
// var file = "xmlFileName.xml";
var file = document.getElementById("filename").value;
document.body.innerHTML =
loadXMLDoc(file);
}
</script>
</body>
</html>
首先，没有必要仅仅为了从文本输入中获取一个名称而更改应用程序的其他位-您可以将输入的内容分配给与硬编码字符串相同的变量，然后像以前一样传递它。您还可以将loadXMLDoc中的内容放入一个变量中，并调试输出，以查看两次获得的内容是否相同
/*var filename = "xmlFileName.xml";*/
var filename = document.getElementById("filename").value.trim();
var bodyString = loadXMLDoc(filename).toString();
document.body.innerHTML = bodyString;
因为在这两种情况下输入和输出的变量相同，所以可以调试它们，以检查它们两次的字符串内容是否相同。是否可以使用document.write创建元素？我一直使用document.createElement。不是document.write用于编写字符串吗？我对这一点不熟悉。但是document.write对我来说很好。至少在它允许我呈现内容的条件下。我使用friebug检查html页面，它显示了我正在编写的id的所有元素。但是我将尝试createElement，然后检查代码是否有效。感谢代码缺少实际获取文件的部分。缺少一个示例XML文件（以及对所用XML文件结构的描述）。代码的其他部分也缺少（函数可忽略），并且假定的XML结构不明显，按钮提交表单，这在这里很难理解。请提供再现问题的实际代码。@Andreas要回答您的问题，document.write
可以做任何事情。不用了，谢谢。这就解决了我现在的问题。但是有一个问题，如果XML数据非常大（比如XML文件>1GB），该怎么办。字符串能容纳那么多数据吗？@Jay，这将是一个新问题。但是，如果您希望能够处理DOM中的数据，我不明白为什么它不能作为字符串工作（这会消耗更少的存储）。
<!doctype html>
<html>
<head>
<script src="loadxml.js" async></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="userPrompt">
<form>
<input type="text" id="filename"/><br><br>
<button type="button" onclick="callDOMHandler()">Submit Query</butto\
n>
</form>
</div>
<script type="text/javascript">
function callDOMHandler(){
// var file = "xmlFileName.xml";
var file = document.getElementById("filename").value;
document.body.innerHTML =
loadXMLDoc(file);
}
</script>
</body>
</html>
function loadXMLDoc(filename){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",filename,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var table = "<table>";
var x=xmlDoc.getElementsByTagName("Row");
for (i=0;i<x.length;i++){
if(i==0)
table += "<tr class=\"topRow\">";
else
table += "<tr>";
var totalRows = x[i].childNodes.length;
for(j=0;j<totalRows;j++){
if(is_ignorable(x[i].childNodes[j])){
/*do nothing*/
}
else{
table += "<td>";
if(j==(totalRows-2)&&(i!=0))
table += "<img id=\"logo\" src=\""+x[i].childNodes[j].childN\
odes[0].nodeValue+"\"/>";
else
table += x[i].childNodes[j].childNodes[0].nodeValue;
table += "</td>";
}
}
table += "</tr>";
}
table += "</table>";
return table;
}
/*var filename = "xmlFileName.xml";*/
var filename = document.getElementById("filename").value.trim();
var bodyString = loadXMLDoc(filename).toString();
document.body.innerHTML = bodyString;