在同一 HTML 页面上显示 HTML 和 XML 内容
[英]Display HTML and XML content on the same HTML page
问题描述
I have a HTML page in which I have a button;
我有一个HTML页面，其中有一个按钮； pressing that button a javascript function is called - here results a String which is the representation of an xml.按下该按钮javascript function 被调用 - 这里产生一个字符串，它是 xml 的表示。 I want to represent this xml on the same page with the button, similar with what is in the picture below:!我想用按钮在同一页面上表示这个 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.我也尝试过使用 iframe，但我没有 src 属性的文件。 What I've tried is:我试过的是：
<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?我已经查看了如何使用 Javascript 在 HTML 页面中将 XML 显示为可折叠和可扩展的树？ I took some ideas from here我从这里得到了一些想法
Thank you for helping me!感谢你们对我的帮助！
3 个解决方案
解决方案1
1 已采纳 2011-04-28 10:45:12
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');
解决方案2
1 2011-04-28 10:51:06
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.请注意，您看到的“树状”视图实际上是 IE 对 XML 文件的默认视图。 Other browsers will have different views for XML files, and some do not even let you view XML files without a plug-in.其他浏览器对于 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.但是，如果您只想按下一个按钮，然后整个页面变成 XML，那么无论如何只需在按下按钮时重定向到该 XML URI。 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. IE 将以树形形式显示 XML 文件，而其他浏览器可能会要求您下载该文件，或以由其插件确定的任何格式显示 XML 文件。
解决方案3
0 2015-12-03 08:45:38
I set the xml data in the src attribute:我在 src 属性中设置了 xml 数据：
iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.