javascript 在同一 HTML 页面上显示 HTML 和 XML 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5817228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display HTML and XML content on the same HTML page
提问by Paul
I have a HTMLpage in which I have a button; pressing that button a javascriptfunction is called - here results a String which is the representation of an xml. I want to represent this xml on the same page with the button, similar with what is in the picture below:!
我有一个HTML页面，其中有一个按钮；按下那个按钮，一个javascript函数被调用——这里产生一个字符串，它是一个 xml 的表示。我想用按钮在同一个页面上表示这个xml，类似于下图：！
Here is the simplified code I've tried but did not worked (see under the code the result of it - nothing displayed):
这是我尝试过但没有工作的简化代码（在代码下查看它的结果 - 没有显示任何内容）：
<html>
<head>
<script type="text/javascript">
function xml_test()
{
var xmlString = "<note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
var my_div = document.getElementById("labelId");
alert(xmlString)
my_div.innerHTML += xmlString;
}
</script>
</head>
<body>
<input type="button" value="TEST" onclick="xml_test()"/>
<br><br>
<label id="labelId">XML: </label>
</body>
</html>
I've tried with an iframe also, but I do not have an file for the src attribute. What I've tried is:
我也尝试过使用 iframe，但我没有 src 属性的文件。我试过的是：
<html>
<head>
<script type="text/javascript">
function populateIframe() {
var xml = "<?xml version='1.0' encoding='UTF8' standalone='yes'?><note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
var iframe = document.getElementById('myIframe');
var idoc= iframe.contentDocument || iframe.contentWindow.document; // IE compat
idoc.open("text/xml"); // I know idoc.open(); exists but about idoc.open("text/xml"); I'm not sure if exists;
idoc.write('<textarea name="xml" rows="5" cols="60"></textarea>');
//idoc.write(xml); // doesn't work
idoc.getElementsByTagName('textarea')[0].value= xml;
idoc.close();
}
</script>
</head>
<body onload="populateIframe();">
<iframe id="myIframe" width="900" height="400"></iframe>
</body>
</html>
and the result is:
结果是：
I've already looked over How to display XML in a HTML page as a collapsible and expandable tree using Javascript?I took some ideas from here
我已经查看了如何使用 Javascript 在 HTML 页面中将 XML 显示为可折叠和可展开的树？我从这里得到了一些想法
Thank you for helping me!
感谢你们对我的帮助！
回答by BreakHead
Just Create am HttpHandler, and open it in a Iframe:
只需创建 HttpHandler，并在 iframe 中打开它：
public class Handler : IHttpHandler
{
#region IHttpHandler Members
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
XmlSerializer serializer = new XmlSerializer(typeof(Note));
MemoryStream stream = new MemoryStream();
StreamWriter writer = new StreamWriter(stream, Encoding.Unicode);
serializer.Serialize(writer, new Note() { Name = "Kundan Sinha", Place = "Bangalore", State = "Karnataka" });
int count = (int)stream.Length;
byte[] arr = new byte[count];
stream.Seek(0, SeekOrigin.Begin);
stream.Read(arr, 0, count);
UnicodeEncoding utf = new UnicodeEncoding();
stream.Close();
writer.Close();
context.Response.ContentType = "text/xml;charset=utf-8";
context.Response.Write(utf.GetString(arr).Trim());
context.Response.Flush();
}
#endregion
}
public class Note
{
public string Name { get; set; }
public string Place { get; set; }
public string State { get; set; }
}
You can pass your received xml string to this where I am doing context.Response.Write('Pass you XML data here');
您可以将接收到的 xml 字符串传递给我正在执行的操作 context.Response.Write('Pass you XML data here');
回答by Stephen Chung
You must use your favorite JavaScript library with a tree widget to display that XML in tree form.
您必须使用您最喜欢的 JavaScript 库和树小部件来以树形式显示该 XML。
Note that the "tree-like" view you see is actually IE's default view for XML files. Other browsers will have different views for XML files, and some do not even let you view XML files without a plug-in.
请注意，您看到的“树状”视图实际上是 IE 对 XML 文件的默认视图。其他浏览器对 XML 文件会有不同的视图，有些浏览器甚至不允许您在没有插件的情况下查看 XML 文件。
You should not depend on browser-specific functionality if viewing the XML in tree form is important to your page's functionality.
如果以树形式查看 XML 对页面功能很重要，则不应依赖特定于浏览器的功能。
If you, however, just want to press a button and then the whole page gets turned into an XML, then by all means just redirect to that XML URI on button press. IE will show that XML file in tree form, while other browsers may either ask you to download the file, or display the XML file in whatever format that is determined by their plugin's.
但是，如果您只想按下一个按钮，然后整个页面就会变成一个 XML，那么无论如何只需在按下按钮时重定向到那个 XML URI。IE 将以树形式显示该 XML 文件，而其他浏览器可能会要求您下载该文件，或者以由其插件确定的任何格式显示该 XML 文件。
回答by Sabine
I set the xml data in the src attribute:
我在 src 属性中设置了 xml 数据：
iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');
