使用 jquery 的 html 目标 iframe答案

【问题标题】：html target iframe using jquery使用 jquery 的 html 目标 iframe
【发布时间】：2013-02-19 07:05:35
【问题描述】：

在提交表单后的以下代码中，我需要留在同一页面上，所以我说我的目标是 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>

【问题讨论】：

Javascript 不针对 iFrame。也许尝试使用 jQuery Load 将内容加载到 div 中
@Rajeev 到目前为止，您似乎拥有完美的接受记录。没有答案满足您的需求？

标签： jquery html css jquery-ui

【解决方案1】：

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

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

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

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

例如：

var target_document = $('#upload_target')[0].contentWindow.document;
var target_result   = $(target_document).find('#result');
target_result.val('This is your result');

【讨论】：

【解决方案2】：

试试这个：-

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

【讨论】：

【解决方案3】：

这对我有用：

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

【讨论】：