javascript - 如果在 iframe 中，Bootstrap 模式弹出窗口会忽略滚动位置

Question

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

https://jgroups-dev.herokuapp.com/ (单击“查找群组”，然后单击“电子邮件”按钮)

但是，当它位于 iframe 内时，模式弹出窗口会锚定到 iframe 的顶部，完全忽略用户的滚动位置:

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

为了尝试解决这个问题，我尝试根据 iframe 内的滚动位置手动设置模式弹出窗口的 top 属性，但是 $(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 中滚动了多远，那么我就没有机会正确定位 Bootstrap 模式弹出窗口。非常感谢您的帮助，我在这方面遇到了困难......

Answer 1

可能的问题:它没有忽略滚动值。用户滚动发生在父窗口中。您的 iframe 的高度可能等于它的文档高度。模态框始终放置在包含窗口(在本例中为 iframe)的顶部中心(有一些边距)。因此，当您在独立窗口中看到它时，它工作得很好。它位于 iframe 内文档的开头附近。

可能的解决方案[如果来源相同]从 iframe 内部，检查页面是否有父窗口(以确保它位于 iframe 内部)以及它是否已读取scrollTop 的值，然后手动调整模态 css top 属性。

parent == self // for any top level window

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

parent.document.body.scrollTop

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

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