如何在 iframe 中显示表单的成功

有一个选择框。我通过 ajax 为 onchange 方法编写了一个函数。当我在div 中显示表单成功时，它效果很好。我的问题是如何在 iframe 中显示我的表单成功？这是我的片段：

$(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>

谢谢

iframe有自己的窗口，因此您无法像访问其他元素那样直接访问它

您可以使用contents()访问该窗口并执行以下操作：

$("#box").contents().find('body').html(data);

在我看来，您不需要ajax，可以简单地提交带有target作为iframe的表单

演示

你可以像这样访问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)

相关内容

最新更新

热门标签：