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

Posted 2023-05-09

【中文标题】当 iframe 的表单验证失败时，让父页面滚动到顶部

【英文标题】：Get parent page to scroll to top when iframe's form validation fails

【发布时间】：2014-09-14 16:37:40

【问题描述】：

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

我在页面中有一个 iframe：

<iframe class="contactForm" frameborder="0"  
   src="/path/to/contact.html" 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 中，同时保持现有的行为原始页面？

【问题讨论】：

应该显示错误信息的div是在iframe还是父页面？

@Khalid，它在 iframe 中。

window.top == window 只有在脚本从主窗口（不在 iframe 中）执行时才应该测试为真

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

【参考方案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
    

【讨论】：

这不会为父窗口实现滚动动作。

不，它没有，但这不是你问的。