使用 jquery 单击时在 iFrame 内滚动

Posted 2023-05-09

【中文标题】使用 jquery 单击时在 iFrame 内滚动

【英文标题】：Scroll within an iFrame on click using jquery

【发布时间】：2012-10-22 09:46:47

【问题描述】：

我使用 iFrame 将一份工作申请表拉入另一个页面。如果用户点击提交并且页面上有错误，则会出现一个覆盖框（很像灯箱），向用户提供验证错误消息。它有一个“确定”按钮，然后关闭窗口。

我希望单击按钮将用户带回页面顶部，因为 iFrame 的高度约为 1000 像素。同样，这一切都发生在 iFrame 中。 iFrame 中的弹出窗口会将您带到 iFrame 顶部的锚点。这里没有跨域的疯狂。

我更喜欢用 jquery 来做这件事，因为我已经有一个与按钮关联的点击函数，但如果我必须使用老式的 javascript DOM 方法，我会解决的。

我尝试了 scrollTo、动画、将锚附加到 iFrame 的 src，但没有任何效果。我也没有收到任何错误来指导我。任何帮助将不胜感激！

更新

if(errors > 0) 
    var header = "It appears there was a problem!";
    var message = "There are <b><u>"+errors+"</u></b> errors with your application.<br/><br/>";
        message += "<b>Please re-attach your resume once you have corrected the errors.</b>";

    jQuery("#infoMessage .infoText").html("<h2>"+header+"</h2><p>"+message+"</p>");
    jQuery("#infoMessage button").button();

    jQuery("button.okButton").click(function() 
        jQuery("#infoMessage").fadeOut();
        jQuery(".light_overlay").fadeOut();
        return false;

        //alert('testing');
        // Do not use .scrollTop() as it is deprecated.
        jQuery('body').prop('scrollTop', 0);
        // Additionaly, animate it.
        jQuery('body').animate( scrollTop: 0 );

    );

    jQuery("#infoMessage").fadeIn('slow');
    jQuery(".light_overlay").fadeIn();

这是我被建议添加的最后一个 sn-p 代码，但它不起作用（注释掉警报后的 4 行）

【问题讨论】：

没有代码和错误信息的问题更难回答

【参考方案1】：

假设您使用的是 jQuery，还有一些事情要记住，但比传统的 JavaScript 要少得多。

滚动时使用“正文”而不是文档。 使用 prop() 设置 scrollTop 如果您要处理锚点上的点击事件，请始终调用 event.preventDefault()。

示例代码：

// Do not use .scrollTop() as it is deprecated.
$('body').prop('scrollTop', 0);

// Additionaly, animate it.
$('body').animate( scrollTop: 0 );

【讨论】：

不幸的是，这也没有成功。什么都没有发生，页面上也没有错误。只是为了提供一些背景知识，我有一个 errorMessagingCheck 函数，它声明一个错误变量并计算页面上有多少错误。我会将上述问题中的代码粘贴为更新

【参考方案2】：

您可以用<div> 包裹<iframe> 并使用绝对位置并将它的顶部和左侧设置为0。这将允许您将iframe 移动到您想要的位置以及允许您移动以编程方式设置滚动位置。

这里是一个例子：http://jsfiddle.net/BDC9Q/35/

【讨论】：

正如我所提到的，被点击的按钮在 iFrame 内 - 但在覆盖框中，而不是在页面本身上。

所以我给了我周围的 div 一个 wrap 的 id，并包括 -- jQuery('#wrap').prop('scrollTop', 0); -- 我对第一次使用 -- $wrap.prop('scrollTop', 500); 有点困惑——你说模拟滚动？这是在做什么？

我这样做是为了模拟已经向下滚动的页面并显示单击按钮后它会向上滚动