引导模式弹出忽略滚动位置，如果在IFRAME

我有一个引导模式弹出，工程巨大的，如果该网页是不是在iframe中，像这样：引导模式弹出忽略滚动位置，如果在IFRAME

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

然而，当它是一个iframe中的模式弹出锚iframe的顶部，完全无视用户的滚动位置：

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

要尝试破解解决这个问题，我ATTE根据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，那我也没有能够有机会正确定位自举模式弹出窗口。非常感谢，我遇到了这一块砖墙...

来源

2016-04-04 Justin

给谁给我-1，得到了生命。 – Justin

可能的问题：它不会忽略滚动值。用户滚动发生在父窗口中。你的iframe的高度可能等于它的文档高度。 Modal总是位于包含窗口的顶部中心（有一些边距）（在本例中为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

来源

2016-04-04 20:12:24

这不起作用，给出了一个跨域错误：main.js：65 Uncaught SecurityError：阻止了一个源于“http：// localhost：5000”的框架访问一个源于“http：//www.yourjourney”的框架。电视”。协议，域和端口必须匹配。 – Justin

仅当来自同一个域的访问父级仅适用于跨域限制。你可以在同一个域名上托管这两个页面吗？ –

不幸的是，被嵌入的页面是一个使用angularjs的nodejs应用程序，父级是CMS，因此仅限于基本html（因此是iframe。） – Justin

引导模式弹出忽略滚动位置，如果在IFRAME

回答

相关问题