1

我正在使用 Jquery 使用以下代码更改网页上 iframe 的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"> </script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
    var html1 = $('#result iframe').text();
    console.log('Before');
    console.log(html1)
    $('#result iframe').contents().find('body').append('<p>hello</p>');
    var html2 = $('#result iframe').text();
    console.log('After');
    console.log(html2)
});

 </script>
    <div id="result">
        <iframe id="result">
            <html>
                <head>
                </head>
                <body>
                </body>
            </html>
        </iframe>
    </div>


</body>
</html>

我可以在实际网页上看到更改，但更改未出现在日志中。我尝试使用 .html() 函数，但我遇到了同样的问题。我创建了一个 jsfiddle：http: //jsfiddle.net/AbE89/

我在 stackoverflow 上发现了类似的问题，但这主要是一个过时的浏览器问题，我使用的是最新的 chrome。我还尝试了最新版本的 Firefox，但仍然没有运气。有没有人遇到同样的问题？

4

1 回答 1

0

尝试

$(document).ready(function(){
    var html1 = $('#result iframe').contents().find('html').html();
    console.log('Before');
    console.log(html1)
    $('#result iframe').contents().find('body').append('<p>hello</p>');
    var html2 = $('#result iframe').contents().find('html').html();
    console.log('After');
    console.log(html2)
});

演示：小提琴

如果您希望 html 也包含该<html>元素，那么

$(document).ready(function(){
    var html1 = $('#result iframe').contents().find('html').get(0).outerHTML;
    console.log('Before');
    console.log(html1)
    $('#result iframe').contents().find('body').append('<p>hello</p>');
    var html2 = $('#result iframe').contents().find('html').get(0).outerHTML;
    console.log('After');
    console.log(html2)
});

演示：小提琴

于 2013-08-26T03:10:39.120 回答