如何在 iframe 中显示表单的成功
Posted
技术标签:
【中文标题】如何在 iframe 中显示表单的成功【英文标题】：How to show success of a form in an iframe 【发布时间】：2017-06-29 18:10:35 【问题描述】：有一个选择框。我通过ajax为onchange方法编写了一个函数。当我在 div 中显示表单成功时效果很好。我的问题是如何在 iframe 中显示我的表单成功？ 这是我的sn-p：
$(document).ready(function(e)
$("[name='count']").on('change', function()
var url = "/page2.html";
$.ajax(
type: "POST",
url: url,
data: $("#form").serialize(),
success: function(data)
$("#box").html(data)
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form method="post" action="" id="form">
<select name="count">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<iframe name="box" id="box"></iframe>
</body>
</html>谢谢
【问题讨论】：
【参考方案1】：iframe 有自己的窗口，因此您无法像访问其他元素一样直接访问它
您可以使用contents() 访问该窗口并执行以下操作：
$("#box").contents().find('body').html(data);
在我看来，您不需要 ajax，只需提交带有 target 作为 iframe 的表单
DEMO
【讨论】：
但是如何将表单发送到操作页面？ 如果您在表单上使用target 并设置为 iframe id，则响应将使用表单操作的 url 在 iframe 中呈现【参考方案2】：
您可以像这样访问 iframe 的内容： 假设你在你的“success()”函数中并且 iframe src 不是跨域的
var iframe = $('#box');
//Cross browser compatility
var iframe_doc = iframe[0].contentWindow || iframe[0].contentDocument;
if (iframe_doc.document)
iframe_doc = iframe_doc.document;
iframe_doc.open();
iframe_doc.write("<html><head></head><body></body></html>");
var iframe_body = $(iframe_doc).find('body');
iframe_body.html(data)
【讨论】：
以上是关于如何在 iframe 中显示表单的成功的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Flask 中重新加载有错误的 fancybox iframe 表单
使用 JavaScript 在父窗口中打开 iFrame 表单成功