带有显示 XML 数据的 HTML 的空白页面答案

【问题标题】：Blank page with HTML displaying XML data带有显示 XML 数据的 HTML 的空白页面
【发布时间】：2015-06-09 06:06:00
【问题描述】：

我有一个 html 文档，它创建了一个包含数据的表格，由 xml 存档提供。在adobe括号的实时预览中，我可以看到页面和数据。

但是，当我尝试在某些浏览器（如 IE、Firefox 或 Chrome）中打开时，页面显示为空白。

这里是html代码的一部分，下面是xml代码。

这是html代码

<!DOCTYPE html>
<html>
<head>
<style>

table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; border: 1px solid #777; }
caption { font-size: larger; margin: 1em auto; }
th, td { padding: .65em; }
th, thead { background: #000; color: #fff; border: 1px solid #000; }
tr:nth-child(odd) { background: #ccc; }
tr:hover { background: #aaa; }
td { border-right: 1px solid #777; }

    </style>
</head>
<body>
<script>
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","prueba_new.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table><tr><th>CardN</th><th>CardC</th><th>CardE</th><th>CardNe</th></tr>");
var x=xmlDoc.getElementsByTagName("CCard");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("CardN")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("CardC")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
  document.write(x[i].getElementsByTagName("CardE")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
  document.write(x[i].getElementsByTagName("CardNe")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>
</body>
</html>

这里是xml代码，当然，实际的xml文件，包含几百个条目。

<?xml version="1.0"?>
<numbers>
<CCard>
<CardNe>Volkervun</CardNe>
<CardN>10000034999</CardN>
<CardC>Red Team</CardC>
<CardE>Volker.vcd</CardE>
</CCard>
<CCard>
<CardNe>Lady Mars</CardNe>
<CardN>10009899899</CardN>
<CardC>Blue Team</CardC>
<CardE>LadyM.vcd</CardE>
</CCard>
</numbers>

我尝试了几件事，但都没有奏效。对那个空白页有什么想法？

【问题讨论】：

document.write，浏览器还支持吗？更好的方法是在内存中构建整个表（在字符串变量中），然后使用 [the container element].innerHTML = [the string variable]; 将其放入容器元素中
虽然 document.write 是丑陋且过时的技术，但我不认为它是罪魁祸首。您是否在开发者控制台中看到任何脚本错误？您可以尝试在之后和之前立即放置一些静态文本以确认页面已正确加载吗？
听起来您正试图在不使用本地 Web 服务器的情况下打开文件。安全性会以这种方式限制 ajax
@charlietfl 即使它在同一服务器上的同一目录中？
一直很抱歉。好吧，xml文档与页面位于同一目录中。但仍然根本不给桌子充电。你能解释更多的 .innerHTML 吗？

标签： javascript jquery html css xml

【解决方案1】：

如果您只是通过双击计算机上的 .html 文件在浏览器中打开该文件，那么您是在 file:// 协议下打开它。由于浏览器跨域沙盒，对 XML 文件的 GET 请求将失败：file:// 下的每个页面都被视为一个单独的域，因此您的 .html 页面不允许读取您的 . xml 文件。

它可以在括号中使用，因为实时预览会加载一个简单的本地网络服务器，因此您的页面是在 http:// 协议下的浏览器中查看的。要复制不带括号的效果，请运行不同的本地网络服务器。

我个人最喜欢用于测试的简单网络服务器是serf - 如果您的计算机上安装了 NodeJS，您可以通过在命令行中输入 npm install -g serf 来安装它。然后，您只需在 .html 文件所在的任何文件夹中键入 serf 即可启动服务器。

【讨论】：