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

Posted 2023-05-09

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

【英文标题】：Bootstrap modal popup ignores scroll position if in iframe

【发布时间】：2016-07-24 12:02:17

【问题描述】：

如果网页不在 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 中滚动的距离，那么我就无法正确定位引导模式弹出窗口。非常感谢您的帮助，我在这个上遇到了一堵砖墙......

【问题讨论】：

给我-1的人，获得生命。

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

【讨论】：

这不起作用，会出现跨域错误：main.js:65 Uncaught SecurityError: Blocked a frame with origin "localhost:5000" from access a frame with origin "yourjourney.tv".协议、域和端口必须匹配。

只有当两者都来自同一个域时才允许访问父级，因为跨域受限。你可以在同一个域上托管这两个页面吗？？

不幸的是，嵌入的页面是带有 angularjs 的 nodejs 应用程序，父级是 CMS，因此仅限于基本 html（因此是 iframe。）

但是我同意你的观点，iframe 内容是 iframe 高度的 100%，所以 scrollTop 不起作用，我实际上动态地从 iframe 向父级发送一个 postMessage，告诉它它的高度所以它可以调整 iframe 高度以匹配（以避免滚动条内有滚动条。）

您是否可以从父窗口到 iframe 执行类似的 postMessage，每当用户滚动页面时，它会发送 scrollTop 值。你可以使用这个值