如果在 iframe 中，引导模式弹出窗口会忽略滚动位置

Question

如果网页不在 iframe 中，我有一个引导模式弹出窗口，效果很好，如下所示：

https://jgroups-dev.herokuapp.com/（点击查找群组，然后点击电子邮件按钮）

但是，当它在 iframe 中时，模式弹出框会锚定到 iframe 的顶部，完全忽略用户的滚动位置：

http://www.yourjourney.tv/connect/j-group-catalogue/

为了解决这个问题，我尝试根据 iframe 中的滚动位置手动设置模式弹出窗口的顶部属性，但是 $(window).scrollTop() 和其他变体都返回 0 或40 来自 iframe。

$('.send-email-modal').modal();

            setTimeout(function () {
                if(inIframe()) {
                    var emailModal = $('.send-email-modal .modal-dialog');
                    var win = $(window);
                    var offset1 = win.scrollTop();
                    var offset2 = document.documentElement.scrollTop || document.body.scrollTop;
                    console.log('offset1: ' + offset1);
                    console.log('offset2: ' + offset2);
                    var positionWindow = (offset1 + (win.height() / 2)) - (emailModal.height() / 2);
                    console.log('win.height(): ' + win.height());
                    console.log('emailModal.height(): ' + emailModal.height());
                    console.log('positionWindow: ' + positionWindow);
                    emailModal.css({ 'top': positionWindow });
                }
            }, 500);

这是控制台输出：

offset1: 40
main.js:54 offset2: 40
main.js:56 win.height(): 27037
main.js:58 emailModal.height(): 426
main.js:59 positionWindow: 13345.5

如果我无法从 iframe 中的代码检索用户在 iframe 中滚动的距离，那么我就无法正确定位引导模式弹出窗口。非常感谢您的帮助，我在这个上遇到了一堵砖墙......

Answer 1

可能的问题：它没有忽略滚动值。用户滚动发生在父窗口中。您的 iframe 的高度可能等于它的文档高度。模态总是放置在包含窗口的顶部中心（有一些边距）（在这种情况下是你的 iframe）。因此，当您在独立窗口中看到它时，它可以正常工作。它位于 iframe 内文档的开头附近。

可能的解决方案[在相同来源的情况下] 从您的 iframe 内部，检查页面是否有父窗口（以确保它在 iframe 内）以及它是否已读取 scrollTop 的值，然后手动调整模态 css top 属性。

parent == self // 对于任何顶级窗口

以下将为您提供父窗口的滚动顶部

parent.document.body.scrollTop

如果是跨域 如果 iframe 和父级的来源不同，您将无法访问父级的属性。 尝试使用 postMessage。将 scrollTop 的值从父级发送到用户滚动的 iframe。保存此值并在显示模式时使用它。

在此处阅读有关 postMessage 的更多信息https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage