代码之家 › 专栏 › 技术社区 › 730wavy

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

iframe forms ajax jquery javascript

730wavy · 技术社区 · 7 年前

在我的网站上,我有一个发布到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>");
}
});

2 回复 | 直到 7 年前

SRK 7 年前

获取的文本 #alert 可以使用iframe中的div

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

它将为您提供 #警报 部门。

使现代化

$('#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");
         }
    });

您可以使用$。修剪以删除字符串周围的所有空格,并检查是否与“success”匹配。 TRIM

Sam Denty zneak 7 年前

您试图获取表单元素的内容,但没有使用 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')
}