引導模式彈出忽略滾動位置，如果在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

回答

相關問題