Question

我正在实施一个使用iframe的ajax图片上传功能。我搜索过SO并找到了类似的问题，但我已经尝试过了，但他们没有为我工作过。我的ajax图片上传工作原理如下：

用户点击“添加图片”按钮，动态创建一个新对话框$('#imgdialog')。此对话框只是一个div，其中包含动态创建的表单$('#imgform')和iframe $('#upload_target')。
该表单允许用户通过ajax uplaod选择应显示在iframe中的文件。

但这不会发生。我正在学习本教程：http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

我的实现和教程中的实现之间的主要区别在于，在我的实现中，窗体和iframe不是在页面加载时开始的，它们是在用户单击按钮时动态创建的。 / p>

我知道我的PHP代码工作正常，因为当我使用FireBug时，我可以看到所需的POST和RESPONSE。但是Iframe没有填充，虽然在FireBug中我可以看到它存在于HTML中，除了它是空的。

创建动态表单和iframe的代码是：

    imgform = document.createElement('form');
    imgform.id = 'imgform';
    imgform.method='post';
    imgform.enctype='multipart/form-data';
    imgform.action ='upload_1.php';
    imgform.target = 'upload_target';
    imgform.onsubmit='showUploadedItem();';
    $('#imgform').append("Select image:<br /><input type='file' id='imgfile' />");
    $('#imgdialog').append("<iframe id='upload_target' name='upload_target' style='border:1px solid gray;' src='#'></iframe>");

    $('#upload_target').bind('load', function() { // doesn't work with .live either
         $(this).contents().find("body").html('greetings from the iframe !');
         alert("loaded");
    });

在$('#imgform')的onSubmit函数中，我还包括以下行：

    if($('#upload_target').length > 0){ alert("it's there"); } else {alert ("not there"); }

我得到了“不在那里”。

如何访问iframe？

Answer 1

问题是否可能是您在iframe存在之前设置响应目标？我肯定已将这类事件的听众绑定到iframe（我认为甚至是动态创建的）。虽然它有一些尴尬 - 可能在jQuery中需要一个非常小的插件，这取决于你想要什么样的加载事件。

此外，＃imgdialog div在哪里动态创建？不在这里的代码中。也许你打算给一个imgdialog的id。

Answer 2

$(document.body).on('DOMNodeInserted', 'iframe', function(e) {
    console.log('inserted', e);
});

var frame = document.createElement('iframe');
$(document.body).append(frame);

或定义函数并直接从iframe内容调用

动态创建的iframe无法访问

2 个答案: