在同一 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.