在 iframe 中使用 onLoad 函数

我正在调整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 页面上的位置。

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

就是这样:)

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 代码（在这种情况下，您可以向用户编写一条消息，例如：抱歉，您的浏览器不支持此内容）。

很抱歉，但我根本不明白为什么这里涉及 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 以外的任何东西。

相关内容

最新更新

热门标签：