JQuery UI对话框嵌套在iframe中

Question

我正在开发一个使用iframes的sp2013应用程序。具体而言，它是一个非常大的iframe，占据了大部分屏幕。在许多时候，我会打开jquery ui对话框窗口。它们被设置为出现在视口的中心，这很棒，但是它显示在iframe的中心，而不是可见屏幕的中心。

有没有办法告诉jquery ui查看window.top的滚动属性，而不是iframes的滚动属性？

编辑：iframe和父级位于同一域，因此跨域问题不是问题。

- Colin DeClue

---

你能否尝试将<base target="_parent" />放置在iframe加载的页面的头部？ - Jules Colle

尝试使用jQuery postMessage插件，这是一个跨框架通信工具，您可以使用它传输变量和方法。http://benalman.com/projects/jquery-postmessage-plugin/ - Arpad Bajzath

@Jules 这对于 jQuery 对话框不会有任何影响。 - Mooseman

@Mooseman 如果jQuery UI被正确实现，大多数情况下它可以查看页面基础并将其用作参考窗口来显示对话框。我不打算自己尝试这个，但我真的认为值得一试。 - Jules Colle

@Jules：那个没有任何作用。 - Colin DeClue

太遗憾了，如果它能实现的话，那将是一个非常棒的解决方案 :) - Jules Colle

Answer 1

好的，我找到了解决方案。在声明对话框时，我执行了以下步骤：

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

- Colin DeClue

---

这在跨域上失败了，错误：无权访问属性“nodeType” 在jquery.min.js中。 - Tomas

正确。我在问题中添加了它们是相同的域。我不确定是否有跨域可行的解决方案。 - Colin DeClue

谢谢@Colin，我已经在这里发布了一个新问题。 - Tomas

Answer 2

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 的边缘。添加提示消息以显示窗口宽度和对话框位置。

- Mooseman

---

嗯，我认为这只是重新做了jQuery UI已经做过的事情。但它确实让我找到了正确的答案。 - Colin DeClue

我的答案让你做的比 position: {my: "center", at: "center", of: window.top} 更多。使用适合你的方法。 - Mooseman

你的内容仍然会在 iframe 的中心，但这并没有真正回答问题。 - Colin DeClue