如何在另一个iframe中访问iframe内容?

时间:2012-01-16 09:11:07

标签: jquery iframe

我有一个页面

<div id="editForm_container">
<form id="imageForm" name="imageForm" enctype="multipart/form-data" target="hiddenFrame" method="post" action="test.php">                   

    <label><strong>File Name</strong></label>
    <input type="file" name="fileupload" id="fileupload" /><br />
    <input type="submit" name="submit_image" id="submit_image" />

</form>
<iframe id="hiddenFrame" name="hiddenFrame"></iframe>

我将此页面加载到位于另一个页面的另一个iframe ,我在我的js文件中写了这个

$("#imageFrame").load(function(){

this.imageFramecontent = $("#imageFrame").contents();
this.imageFramefields.fileField = this.imageFramecontent.find( ":input[ name = 'fileupload' ]" );
this.imageFrameform = this.imageFramecontent.find( "form#imageForm" );
this.hiddenFrame = this.imageFramecontent.find("iframe#hiddenFrame");

this.imageFramefields.fileField.change(function(){

    self.imageFrameform.submit();
    self.hiddenFrame.load(function(){

        alert(self.hiddenFrame.contents().html());
    });                     
});

返回空白警报。如何获取 #hiddenFrame内容

1 个答案:

答案 0 :(得分:2)

你很亲密。 .contents()方法返回一组DOM元素,因此您需要指定要返回html的元素。所以你需要这样的一行:

hiddenFrame.contents().find('html').html();

我无法在上面提供的代码中运行示例,但我设法让它使用以下调整:

$("#imageFrame").load(function(){

    imageFramecontent = $("#imageFrame").contents();
    imageFrameupload = imageFramecontent.find( ":input[ name = 'fileupload' ]" );
    imageFrameform = imageFramecontent.find( "form#imageForm" );
    hiddenFrame = imageFramecontent.find("iframe#hiddenFrame");

    imageFrameupload.change(function(){

        hiddenFrame.load(function(){

            alert(hiddenFrame.contents().find('html').html());

        }); 
        imageFrameform.submit();

    });
});