Question

在提交表单后的以下代码中，我需要保持在同一页面上，所以我说我的目标是iframe。

但是在得到回复后我需要填充文本区域，我该怎么办呢。下面的代码出了什么问题？

<script>
    //After I get a response
    $("#result").html("This is your result"); //Textarea not populated
</script>

<form  method="POST" enctype="multipart/form-data" id="contentform" action="/dg/execute_model/" target="upload_target" onsubmit="return validate();">{% csrf_token %}
    <b>
        <table class="cat-tab" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td><font>*</font>Test data</td>
                <td><input type="file" name="test_file" id="test_file" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Build" id="addbtn" /></td>
            </tr>
        </table>
</form>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;">
    <b><br>Result:<br><br></b>
    <textarea rows="20" cols="100" name="result" id="result" ></textarea>
</iframe>

Answer 1

试试这个： -

$('#upload_target').contents().find('#result').html('This is your result');

Answer 2

这对我有用：

$( "#result", $("#upload_target").contents() ).val("This is your result.");

Answer 3

为什么查询$('#result')在您的示例中不起作用

默认情况下，jQuery查询当前document对象的DOM树。由于iframe元素实际上嵌入了一个单独的window对象和一个单独的document对象，因此textarea不在您当前查询的范围内且找不到。

如何正确查询$('#result')

这意味着为了遍历iframe嵌入的DOM，我们首先需要访问iframe的window和document对象。一种安全且跨浏览器的方法是使用window属性访问iframe的.contentWindow，然后使用.document的{{1}}属性。

例如：

window

使用jquery的html目标iframe

3 个答案: