Question

客户希望为其网站范围的订阅应用程序调整现有表单。由于网站布局的方式，实现这一点的最简单方法是让iframe将现有表单拉入新页面。但是，当表单验证触发失败时，这会导致现有行为出现一些问题。

我在页面中有一个iframe：

<iframe class="contactForm" frameborder="0" height="1720px" 
   src="/path/to/contact.html" width="904px”>

  <p>Your browser does not support frames.</p>

</iframe>

此功能在提交事件上触发：

$('form#ContactForm').bind('submit', function(event){ 
    if ( !validation ) {

        var error ="Please fill out the entire form";
        $('#formErrors').text(error);
        $('html,body').animate({
            scrollTop: $("#formErrors").offset().top},
                'fast');
        }
    } else {
        //execute ajax submission here
    }
}

执行。如果表单验证失败，表单页面顶部的div元素将填充错误文本，并且动画快速滚动操作。但是，由于iframe设置为足够大的高度以容纳原始表单页面而不进行任何滚动，因此不执行此滚动操作。

是否有任何方法可以让我的滚动操作在窗口中显示 IF 和仅限此脚本在iframe中加载，同时保持现有行为原始页面？

Answer 1

解决方法是使用window.postMessage。

在父窗口中，我有

function receiveMessage(e){

  console.log("Received Message: " + e);

  if (e.originalEvent.origin === 'http://www.site.client.com') {
    $("html, body").animate({
        scrollTop : 441
    }, "fast");
  }
}
$(window).bind("message", receiveMessage);

并为iframe内容的原始js代码添加了此内容：

window.parent.postMessage("Scroll", "http://www.site.client.com/");

这会导致iframe发布父级捕获的消息。由于这是唯一发布的消息，当且仅当域匹配时，我才使用它来触发滚动事件。

Answer 2

$('form#ContactForm').bind('submit', function(event){ 
    if ( !validation ) {

        var error ="Please fill out the entire form";
        $('#formErrors').text(error);
        if (window.top != window) {
            $('html,body').animate({
                scrollTop: $("#formErrors").offset().top},
                    'fast');
            }
        }
    } else {
        //execute ajax submission here
    }
}

当iframe的表单验证失败时，获取父页面以滚动到顶部

2 个答案: