Question

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

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

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

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

为了解决这个问题，我试图根据iframe中的滚动位置手动设置模态弹出窗口的顶级属性，但是$（window）.scrollTop（）和其他变体都是从iframe中返回0或40。

$('.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

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

1 个答案: