【问题标题】:Display dynamic content in a frame controlled by the tree created from XML in another frame在一个框架中显示动态内容,该框架由另一个框架中的 XML 创建的树控制
【发布时间】:2009-03-11 15:28:27
【问题描述】:

我有一个 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 框架中的内容。

谁能告诉我怎么做?

【问题讨论】:

    标签: javascript html xml xslt


    【解决方案1】:

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

    【讨论】:

    • 你能详细解释一下吗?谢谢你
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-02
    • 1970-01-01
    • 1970-01-01
    • 2018-10-31
    • 2018-05-26
    相关资源
    最近更新 更多