在由另一帧中的XML创建的树控制的帧中显示动态内容

时间:2009-03-11 15:28:28

标签: javascript html xml xslt

我有一个XML文件:

<root>
  <foo>
    <!--Content Here-->
  </foo>
</root>

现在我想从中生成一个HTML文件。 HTML有两个垂直框架。左侧显示XML文件的树视图。我想要正确的显示树视图的内容:当我点击“foo”节点时,内容将显示在右侧。

现在我编写了一个XSL文件来获取树视图

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"         xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:output method="html"/>

<xsl:template match="/">
<html>
<head>
  <!-- Some JS code to deal with the "expand", "collapse"... sth like these-->
</head>
<body>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <a onclick="toggle(this)"><img src="plus.gif"/><img src="folder.gif"/>root</a>
        <div style="display:none;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
          <td width="15"></td>
              <td>
                <a><img src="page.gif"/>Foo</a>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</body>
<html>
</xsl:template>
</xsl:stylesheet>

和HTML文件:

<html>
<head>
<script language="javascript">
function populateFrames(){
    var x = new ActiveXObject("Microsoft.XMLDOM");
    var s = new ActiveXObject("Microsoft.XMLDOM");
    x.async = false
    s.async = false
    x.load("source.xml");
    s.load("tree.xsl");
    var html = x.transformNode(s);
    var destination = document.frames("header").document.open("text/html","replace");
    destination.write(html);
}
</script>
</head>

<frameset onload="populateFrames()" cols="25%,*">
  <frame name="header" scrolling="auto" target="main">
  <frame name="main">
</frameset>
</html>

如您所见,树将显示在header框架中,我希望内容位于main框架中。

有人能告诉我怎么做吗?

1 个答案:

答案 0 :(得分:0)

在“tree.xsl”中,我将内容HTML呈现为每个树节点的隐藏元素。然后,当单击一个树节点时,使用最后两行javascript打开第二个内容框架并写出相应的内容HTML。