在同一 HTML 页面上显示 HTML 和 XML 内容
[英]Display HTML and XML content on the same HTML page
问题描述
我有一个HTML页面，其中有一个按钮； 按下该按钮javascript function 被调用 - 这里产生一个字符串，它是 xml 的表示。 我想用按钮在同一页面上表示这个 xml，类似于下图中的：！
这是我尝试过但没有工作的简化代码（在代码下查看它的结果 - 没有显示）：
<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>
我也尝试过使用 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>
结果是：
我已经查看了如何使用 Javascript 在 HTML 页面中将 XML 显示为可折叠和可扩展的树？ 我从这里得到了一些想法
感谢你们对我的帮助！
3 个解决方案
解决方案1
1 已采纳 2011-04-28 10:45:12
只需创建一个 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; }
}
您可以将收到的 xml 字符串传递给我正在执行的操作 context.Response.Write('Pass you XML data here');
解决方案2
1 2011-04-28 10:51:06
你必须使用你最喜欢的 JavaScript 库和一个树形小部件来以树形形式显示 XML。
请注意，您看到的“树状”视图实际上是 IE 对 XML 文件的默认视图。 其他浏览器对于 XML 文件会有不同的视图，有些甚至不让你在没有插件的情况下查看 XML 文件。
如果以树形形式查看 XML 对您的页面功能很重要，则不应依赖于特定于浏览器的功能。
但是，如果您只想按下一个按钮，然后整个页面变成 XML，那么无论如何只需在按下按钮时重定向到该 XML URI。 IE 将以树形形式显示 XML 文件，而其他浏览器可能会要求您下载该文件，或以由其插件确定的任何格式显示 XML 文件。
解决方案3
0 2015-12-03 08:45:38
我在 src 属性中设置了 xml 数据：
iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');
在HTML页面中显示XML / JSON内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.