iframe中的JQuery UI對話框

我正在開發一個sp2013應用程序，這意味着它使用iframe。具體來說，它是一個佔用大部分屏幕的非常大的iframe。在很多地方，我打開jQuery UI對話窗口。它們被設置爲出現在視口的中間，這很好，除了它顯示在iframe的中間，而不是可見屏幕的中間。iframe中的JQuery UI對話框

有沒有一種方法可以告訴jquery ui查看window.top的滾動屬性，而不是iframe？

編輯：iframe和父母在同一個域中，所以跨域問題不是問題。

來源

2013-04-11 Colin DeClue

你可以嘗試把它放在加載到iframe中的頁面的頭部嗎？ '' – 2013-04-11 18:09:09

嘗試使用jQuery postMessage插件，這是一個跨框架通信工具，並且您可以通過它傳輸變量和方法。 http://benalman.com/projects/jquery-postmessage-plugin/ – 2013-04-11 18:10:41

@Jules這不會對jQuery對話框做任何事情。 – Mooseman 2013-04-11 18:12:14

好吧，所以我找到了解決方案。當聲明我的對話框時，我做了以下操作：

$("selector").dialog({ 
    position: {my: "center", at: "center", of: window.top} 
});

來源

2013-04-11 18:23:21

這在跨域上失敗**錯誤：權限被拒絕訪問jquery.min.js中的屬性'nodeType'**。 – TMS 2014-04-07 19:17:52

正確。我補充說他們是我的問題中的同一個域名。我不確定可以跨域使用的解決方案。 – 2014-04-07 19:20:02

謝謝@Colin，我發佈了一個[新問題]（http://stackoverflow.com/questions/22921363/jquery-ui-dialog-in-a-cross-domain-iframe?lq=1）。 – TMS 2014-04-07 19:30:25

HTML：

<div id="dialog">Hello, world!</div>

的jQuery：

alert('Window size: '+window.innerWidth); 
var dialogWidth = 500; 
var dialogHeight = 200; 
var dialogX = (window.innerWidth - dialogWidth)/2; 
var dialogY = (window.innerHeight - dialogHeight)/2; 
$("#dialog").dialog({ position: [dialogX,dialogY], width: dialogWidth, height: dialogHeight }, 500); 
alert('Dialog position: '+$("#dialog").dialog("option", "position"));

小提琴：http://jsfiddle.net/3vjsa/3/

裏面的iframe上運行。水平和垂直居中。如果窗口的居中位置落在iframe之外，它將移動到iframe的邊緣。添加警報消息以顯示窗口寬度和對話框位置。

來源

2013-04-11 18:10:24 Mooseman

嗯。我認爲這只是重做了jQuery UI已經做的事情。但它確實使我得到了正確的答案。 – 2013-04-11 18:22:06

我的答案可以讓你做更多的位置：{my：「center」，位於：「center」，window.top}。使用適合你的東西。 – Mooseman 2013-04-11 18:49:20

儘管如此，你也仍然會在iframe的中心。它實際上並沒有回答這個問題。 – 2013-04-11 18:50:21

iframe中的JQuery UI對話框

回答

相關問題