0

我正在调整 w3shools “客户端上的 XSLT”教程以通过 JavaScript 运行 XSLT 转换，但我已对其进行了修改以显示结果，div而不是在网站上的标记中。这是他们的代码：

<body onload="displayResult()">
<div id="example" />
</body>

这是我的：

<div class="Tables_Wrapper">
<iframe onload="displayResult()">
<div id="example" />
</iframe>
</div>

我的页面不会呈现次要的div. 它创建iframe但它是空的。

我在这方面很陌生，并且在学习中——我不太了解 JavaScript，所以我只是完全按照 w3schools 网站上的内容复制它。当我将标签保持原样时，它工作得很好body onload，除了没有出现在我希望它出现在我的 HTML 页面上的位置之外。

4

3 回答 3

0

首先，创建一个新页面Test.html并将 div 放入其中。然后，像这样修改 iFrame：

<iframe onload="displayResult()" id="iframeId" src="Test.html">
</iframe>​

然后，像这样修改JS：

function displayResult() {
    xml = loadXMLDoc("cdcatalog.xml");
    xsl = loadXMLDoc("cdcatalog.xsl");

    var iframe = document.getElementById('iframeId');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    // code for IE
    if (window.ActiveXObject) {
        ex = xml.transformNode(xsl);
        innerDoc.getElementById("example").innerHTML = ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        innerDoc.getElementById("example").appendChild(resultDocument);
    }
}​

而已 ：）

于 2012-12-08T18:35:33.173 回答
0

jQuery 将支持 iframe 上的 onload 事件侦听器。

$(document).ready(function () {
    $('iframe').load(function () {
        process();
    });
    function process() {
        alert('iframe has now loaded!'); // substitute for the code you wish to run.
    }
});

但是，将 iframe 视为网页中的一个“洞”，您可以“看穿”外部内容。因此，除非 iframe 不受支持，否则 iframe 中的 HTML 代码将不会被呈现（在这种情况下，您可以给用户写一条消息，例如：对不起，您的浏览器不支持此内容）。

于 2012-12-08T18:39:47.670 回答
0

很抱歉，我只是不明白为什么 iframe 会出现在这里。如果您只是想将 XML 文件的内容显示到您选择的 div（或您选择的几乎任何其他元素）中，您可以使用以下代码来实现。我为书籍使用了一个非常简单的 XML 文件。

HTML

<div id="example"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

jQuery

<script type="text/javascript">
$(document).ready(function () {  
    $.get('test.xml', function (data) {
        $('#example').html('<h1>Good Books</h1>');
        $(data).find('book').each(function () {
            var $book = $(this);
            var title = $book.attr('title');
            var html = "<br />";
            $('#example').append(title + html);
        });             
    });  
 }); 
</script>

XML

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="Hamlet">
        <description>
        info goes here.
        </description>
        </book>
        <book title="In Search of Lost Time">
        <description>
        info goes here.
        </description>
        </book>
        <book title="The Adventures of Huckleberry Finn">
        <description>
        info goes here.
        </description>
</book>
</books>

除了 iframe 之外，上述内容几乎适用于任何东西。

于 2012-12-08T22:37:44.543 回答