Question

我有一个HTML页面，其中有一个按钮;按下该按钮调用javascript函数 - 这里得到一个字符串，它是xml的表示。我想用按钮在同一页面上表示这个xml，类似于下图：！ enter image description here

以下是我尝试过的简化代码，但没有奏效（请参阅代码下的结果 - 没有显示）：

 <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>

enter image description here

我也尝试过使用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>

结果是： enter image description here

我已查看How to display XML in a HTML page as a collapsible and expandable tree using Javascript? 我从here

中提出了一些想法

感谢您帮助我！

Answer 1

只需创建一个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（'在这里传递XML数据'）;

enter image description here

Answer 2

您必须将自己喜欢的JavaScript库与树窗口小部件一起使用，以树形式显示该XML。

请注意，您看到的“树状”视图实际上是IE的XML文件的默认视图。其他浏览器对XML文件有不同的视图，有些浏览器甚至不允许您在没有插件的情况下查看XML文件。

如果以树形式查看XML对您网页的功能非常重要，则不应依赖浏览器特定的功能。

但是，如果您只想按一个按钮，然后整个页面变成XML，那么只需按下按钮即可重定向到该XML URI。 IE将以树形式显示该XML文件，而其他浏览器可能要求您下载该文件，或者以其插件所确定的任何格式显示XML文件。

Answer 3

我在src属性中设置了xml数据：

iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');

在同一HTML页面上显示HTML和XML内容

3 个答案: