当iframe的表单验证失败时，让父页面滚动到顶部 [英] Get parent page to scroll to top when iframe's form validation fails

问题描述

客户希望修改现有表单以适应其网站订阅应用程序。由于网站的布局方式，最简单的方法是使用iframe将现有表单拖入新页面。然而，当表单验证触发失败时，这已经导致了现有行为的一些问题。

我在页面中有一个iframe：

 < iframe class =contactFormframeborder =0height =1720px
 src =/ path / to / contact.htmlwidth = 904px> 
 
< p>您的浏览器不支持框架。< / p> 
 
< / iframe> 
  
 
 $ b 
这个函数会在提交事件中触发： 
 
 
 <$ c $（$ validate）{
 
 var error =请填写完整的form; 
 $（'＃formErrors'）。text（error）; 
 $（'html，body'）。animate（{
 scrollTop：$（＃formErrors）。 offset（）。top}，
'fast'）; 
} 
} else {
 //在这里执行ajax提交
} 
} 
  
如果表单失败validati在窗体页面顶部的div元素中填充错误文本，快速滚动操作被动画化。但是，由于iframe设置的高度足以容纳原始表单页面而无需滚动，因此此滚动操作不会执行。 
 
 
 
有没有什么办法可以让这个滚动操作在窗口 IF 和只有IF 这个脚本是加载在一个iframe中，同时保持原有页面上的现有行为？
解决方案
解决方案是使用 window.postMessage 。 
 
 
在父窗口中，我有
 
 
 函数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发布由父级捕获的消息。由于这是发布的唯一消息，因此当且仅当域名匹配时，才会使用它来触发滚动事件。
 
A client wants to adapt an existing form for their site-wide subscription application.  Due to the way the site is laid out, the easiest way to implement this was to have an iframe pull the existing form into the new page.  However, this has caused some issues with existing behavior when form validation triggers a fail.

I have an iframe in the page:
<iframe class="contactForm" frameborder="0" height="1720px" 
   src="/path/to/contact.html" width="904px">

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

</iframe>
This function triggers on a submit event:
$('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
    }
}
executes.  If the form fails validation, a div element at the top of the form page is populated with the error text and a fast scroll action is animated.  However, since the iframe is set to a height large enough to accomodate the original form page without any scrolling, this scroll action does not execute.  

Is there any way that I can have this scroll action work in a window IF and ONLY IF this script is loaded in an iframe while maintaining the existing behavior on the original page?
解决方案
The solution for this was to use window.postMessage.

In the parent window, I had
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);
and added this for the original js code for the iframe content:
window.parent.postMessage("Scroll", "http://www.site.client.com/");
This results in the iframe posting a message that is captured by the parent.  Since this is the only message posted, I use it to trigger the scroll event if and only if the domains match.

                        
这篇关于当iframe的表单验证失败时，让父页面滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！