调用javascripting并在右侧框架中显示结果

时间:2015-09-08 09:23:16

标签: javascript html

我在一个框架的左侧有一个菜单。 我试图调用一个javascript,它将在从XML数据和XSL模板生成的帧的右侧加载一个新的html。

使用固定参数在一个页面中执行此操作的代码可以正常工作。我挣扎的两个问题是:

  • 如何使其灵活,以便我可以在调用脚本时使用不同的xml数据和模板
  • 如何在右侧框架窗格中显示数据。

这是左侧窗格的代码:

<html>
  <head>
    <script>
      function loadXMLDoc(filename)
        {
         if (window.ActiveXObject)
           {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
           }
         else 
           {
            xhttp = new XMLHttpRequest();
           }
         xhttp.open("GET", filename, false);
         try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
         xhttp.send("");
         return xhttp.responseXML;
        }

       function displayResult(xmlid,xslid)
        {
         xml = loadXMLDoc("XMLDATA/xmlid");
         xsl = loadXMLDoc("XMLDATA/xslid");

         // code for IE
         if (window.ActiveXObject || xhttp.responseType == "msxml-document")
          {
           ex = xml.transformNode(xsl);
           document.getElementById("example").innerHTML = ex;
          }
         // code for Chrome, Firefox, Opera, etc.
         else if (document.implementation && document.implementation.createDocument)
          {
           xsltProcessor = new XSLTProcessor();
           xsltProcessor.importStylesheet(xsl);
           resultDocument = xsltProcessor.transformToFragment(xml, document);
           document.getElementById("example").appendChild(resultDocument);
          }
        }
    </script>
  </head>
  <body>

    <p><a href="javascript:void(0);" onclick="displayResult('XMLDATA/cdcatalog.xml','XSL/cdcatalog.xsl');">TEST</a></p>
    <p><a href="javascript:void(0);" onclick="displayResult('XMLDATA/cdcatalog2.xml','XSL/cdcatalog2.xsl');">TEST</a></p>

    <div id="example" />

  </body>
</html>

如果我在脚本调用中省略了两个参数:

<a href="javascript:void(0);" onclick="displayResult();">TEST</a>

并在此处的参数中分配数据源:

 xml = loadXMLDoc("XMLDATA/cdcatalog.xml");
 xsl = loadXMLDoc("XMLDATA/cdcatalog.xsl");

然后它在同一页面上工作。

我不是程序员,所以一些帮助会很棒。

1 个答案:

答案 0 :(得分:1)

您没有使用传入的变量,而只是使用静态文本。

function displayResult(xmlid,xslid)更改开始......

 xml = loadXMLDoc("XMLDATA/xmlid");
 xsl = loadXMLDoc("XMLDATA/xslid");

要...

 xml = loadXMLDoc(xmlid);
 xsl = loadXMLDoc(xslid);

更新 - 响应OP评论......

如果您想在页面上移动元素,我会认真考虑查看jquery,这样您就可以轻松地detach项目和append them to其他区域。

例如......

$(function(){
  var $rightArea = $("#rightarea");
  $("#leftarea *").each(function(){
    $(this).detach().appendTo($rightArea);
  });
});