将表单发布到 iframe 并在父页面上回显结果文本

Posted 2023-05-09

【中文标题】将表单发布到 iframe 并在父页面上回显结果文本

【英文标题】：post form to iframe and echo result text on parent page

【发布时间】：2018-09-09 13:28:48

【问题描述】：

在我的网站上，我有一个发布到 iframe 的表单，父窗口和 iframe 窗口都在我的页面、域等上。

<iframe id="ifc1" style="display:none;" name="ifc"></iframe>

<div id="couponbox">
<form enctype="multipart/form-data" id="promo-form" class="form-inline" action="" method="post" target="ifc">
    <div class="form-group">            
        <input type="text" name="..." placeholder="Enter Here" id="..." class="form-control" value="">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="Apply Now" placeholder="">
    </div>
</form>
</div>

表单发布成功，在 iframe 页面上有一个显示警报/结果的 div。

<div id="alert" class="alert alert-success">.....</div>

我正在尝试使用 JS 或 Jquery 来查找警报中显示的文本（即失败、成功等），然后在父页面上回显一条消息。

// Attempt at a supposed solution 

// reference to iframe with id 'ifrm'
var ifrm = document.getElementById('ifc1');
var base = document.getElementById('couponbox');
// using reference to iframe (ifrm) obtained above
var win = ifrm.contentWindow; // reference to iframe's window
// reference to document in iframe
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
// reference to form named 'demoForm' in iframe
var form = doc.getElementById('alert');

if (form === "Credits successfully deposited into your account") 
// Tried jQuery 
$('#couponbox').append('success')


// jQuery attempt
if($("#ifc1").contents().text().search("successfully deposited")!=-1)
    alert("found");

到目前为止，我还没有做任何事情。任何帮助表示赞赏。

更新 --

我目前正在尝试使用此代码--

$('#ifc1').on('load', function() 

if($.trim($("#ifc1").contents().find("#alert").html()) === "Credits successfully deposited into your account")
       $("#couponbox").prepend("<b>Successfully Deposited</b>");
$("#buy").replaceWith( '<input type="submit" value="Publish" name="upsub" id="upsub" class="pubbtn action-button" placeholder="">' 

   else 
$("#ifc1").contents().find("#alert").appendTo("#couponbox");

);

我已将它放在页面的末尾。不过，它给我的其他脚本带来了错误。

注释掉replacewith函数，不会出现循环错误---

$('#ifc1').on('load', function() 

if($.trim($("#ifc1").contents().find("#alert").html()) === "Credits successfully deposited into your account")
       $("#couponbox").prepend("<b>Successfully Deposited</b>");
//$("#buy").replaceWith( '<input type="submit" value="Publish" name="upsub" id="upsub" class="pubbtn action-button" placeholder="">' 

   else 
$("#couponbox").prepend("<b>Incorrect</b>");

);

【参考方案1】：

要从 iframe 中获取 #alert div 的文本，您可以使用

$(document).ready(function()
  $("#ifc1").contents().find("form#promo-form").on("submit",function()
      alert($("#ifc1").contents().find("#alert").html());
  );    
);

它会给你#alert div中的文本。

更新

$('#ifc1').on('load', function() 
     alert($("#ifc1").contents().find("#alert").html());
);

当您在 iframe 中提交表单时，它也会触发 iframe 的加载事件。检查是否可以获取加载函数的值？

更新 2

    $('#ifc1').on('load', function() 
         if($.trim($("#ifc1").contents().find("#alert").html()) === "success")
            alert("finish");
         
    );

您可以使用 $.trim 删除字符串周围的所有空格并检查它是否与“成功”匹配。 TRIM

【讨论】：

它返回 undefined 并在提交时发出警报，但也会在表单提交到 iframe 之前在父页面加载时触发。

我已经更新了我的答案。请检查它是否有效，你能告诉我你是如何提交表格的吗？使用 AJAX 或提交按钮？ @Rich

我尝试了新代码，但它没有做任何事情。我使用提交按钮提交表单。

请检查我的回答中的更新。同样在我的旧代码中，我忘记在 ifc1 之前添加 #。 @Rich

啊！您更新的代码似乎有效。我正在做一些更多的测试，如果它检查出来，那么我会接受你的答案。

【参考方案2】：

您正在尝试获取表单元素的内容，但您没有使用innerHTML。

var ifrm = document.getElementById('ifc1');
var base = document.getElementById('couponbox');
var win = ifrm.contentWindow; // reference to iframe's window
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('alert');

if (form.innerHTML.includes("Credits successfully deposited into your account")) 
$('#couponbox').append('success')

【讨论】：

我试过了，但它给了我这个错误 -- Uncaught TypeError: Cannot read property 'innerHTML' of null