javascript - 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 发布一条由父级捕获的消息。由于这是发布的唯一消息，当且仅当域匹配时，我才使用它来触发滚动事件。