Question

我正在调整w3shools "XSLT on the Client"教程以通过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页面上的位置。

Answer 1

首先，创建一个新页面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);
    }
}

就是这样:)）

Answer 2

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视为一个＆＃34;洞＆＃34;在您的网页中，您可以通过＆＃34;浏览＆＃34;对外部内容。出于这个原因，iframe中的HTML代码将不会被呈现，除非不支持iframe（在这种情况下，您可以向用户写一条消息，例如：抱歉，您的浏览器不支持此内容）。

Answer 3

对不起，我只是不明白为什么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之外，上述内容适用于任何事情。

在iframe中使用onLoad函数

3 个答案: