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

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 和 ONLY 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
    }
}