使用 XML 在 HTML 中实现图像 [英] Implementing Images in HTML using XML

问题描述

好的，我正在设计一个使用 HTML、CSS 和(希望如此)XML 的网站.我正在尝试将 XML 用于网站的特定部分，但我在以我想要的方式合并 XML 时遇到了一些困难.

Okay, so I'm designing a website with the use of HTML, CSS, and (hopefully) XML. There's a specific section of the website I'm trying to use XML for, and I'm having some difficulties incorporating XML the way I want to.

我的问题是我试图找到一种方法来读取带有 XML 的图像(或图像目录)，并通过 for 循环使用调用命令将其打印到我的 HTML 网站上，这样我就可以简单地将数据输入到带有属性的 XML 文件，并轻松地为站点上的任何页面调用它们.我还希望最终添加一个搜索栏，有人告诉我 XML 将是一个很好的附加组件，因为您可以添加属性和元素.编辑:我相信我使用了错误的命令将图像拉入 XML.任何有关这方面的信息都会有所帮助.

My problem is I'm trying to find a way to read an image (or an image directory) with XML and print it out onto my HTML website using call commands through a for loop, so I can simply input the data into the XML file with attributes and easily call them for any page on the site. I was also looking to eventually add on a search bar, and I've been told that XML would be a great add-on because of the attributes and elements you can add. Edit: I believe I'm using the wrong command pulling the images into XML. Any info on that would be helpful.

注意:为简单起见，我将 HTML 和 XML 上的编码简化为我遇到的问题.

这是我的 XML 文件

<inventory>
<shirt>
    <picture><image href="tank_top.jpg"/></picture>
    <name>Tank Top</name>
    <description>This is a tank top. </description>
    <price>$12.00</price>
</shirt>
<shirt>
    <picture><image href="sweater.jpg"/></picture>
    <name>Sweater</name>
    <description>This is a sweater. </description>
    <price>$15.00 </price>
</shirt>
<shirt>
    <picture><image href="hoodie.jpg"/></picture>
    <name>Hoodie</name>
    <description>This is a hoodie. </description>
    <price>$17.00 </price>
</shirt>
<shirt>
    <picture><image href="long_sleeve_shirt.jpg"/></picture>
    <name>Long-Sleeve</name>
    <description>This is a long-sleeve. </description>
    <price>$20.00 </price>
</shirt>
<shirt>
    <picture><image href="t-shirt.jpg"/></picture>
    <name>T-Shirt</name>
    <description>This is a t-shirt. </description>
    <price>$50.00 </price>
</shirt>
</inventory>

这是我的 Javascript

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","Example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("shirt");
 for (i=1;i<x.length+1;i++)
  {
   document.write(x[i].getElementsByTagName("picture")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  }

我什至尝试使用以下代码代替图片的第一个document.write"命令，

I even tried using the below code in place of the first "document.write" command for the picture,

var img=new Image();img.src='insert_image_title_here';document.body.appendChild(img);

var img=new Image(); img.src='insert_image_title_here'; document.body.appendChild( img );

但这只是在加载其他所有内容后才将我的图像发送到页面底部.每次打印其余信息时，我都需要加载不同的标题图像(即我需要打印图片，然后是名称，然后是描述，然后是价格.然后是不同的图片以及存储在其中的自己的信息XML 文件).

but this only sent my image to the bottom of the page after everything else loaded. And I need to load different titled images every time the rest of the information is printed out (i.e. I need the picture printed, then the name, then description, and then price. Then a different pictured along with its own information that is stored in the XML file).

TL;博士:我需要通过 JS 以 HTML 格式输出图像，该图像读取 XML 文件.我需要 XML 文件来提取图像，因为 for 循环中嵌套了打印命令.上面是简化的 XML 和 HTML 代码.寻找了几个小时的解决方案.没有发现任何帮助.

TL;DR: I need to output an image in HTML, going through JS, that reads an XML file. And I need the XML file to pull the image because of a for loop I have the print commands nested in. Simplified XML and HTML codes are above. Looked for hours for a solution. Found nothing helpful.

注意:我只是在高中，虽然我已经编码了几年(主要使用 Java 并涉足 HTML)，但我对编码世界的其他部分很陌生.. 实际上，我今天才刚刚开始学习使用 XML.任何和所有的描述都会非常有帮助.并且请包括您认为可能有帮助的任何网络资源甚至书籍.非常感谢！

推荐答案

尝试将您的内容放在表格中.还将您的 for 循环放在 xmlhttp 对象的 onload 或 onreadystatechange 属性中，例如:

Try to put your content in a table. Also put your for loop in onload or onreadystatechange property of xmlhttp object, like:

xmlhttp.onload = function() {
    //for loop here...
};
//and then send the request
xmlhttp.send();

并使用 xmldoc.documentElement.getElementsByTagName 而不是 xmldoc.getElementsByTagName...

and use xmldoc.documentElement.getElementsByTagName rather than xmldoc.getElementsByTagName...

更新:避免使用全局变量并使用 var 来声明变量.

Update: Avoid using globals and do use var to declare variables.

这篇关于使用 XML 在 HTML 中实现图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！