iframe 内的 JQuery UI 对话框答案

【问题标题】：JQuery UI Dialog inside of an iframeiframe 内的 JQuery UI 对话框
【发布时间】：2013-04-11 17:55:46
【问题描述】：

我正在开发一个 sp2013 应用程序，这意味着它正在使用 iframe。具体来说，它是一个非常大的 iframe，占据了大部分屏幕。在很多时候，我正在打开 jquery ui 对话框窗口。它们设置为显示在视口的中间，这很好，只是它显示在 iframe 的中间，而不是可见屏幕的中间。

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

编辑：iframe 和父级在同一个域上，因此跨域问题不是问题。

【问题讨论】：

你能试着把它放在 iframe 中加载的页面的头部吗？ <base target="_parent" />
试试 jQuery postMessage 插件，这是一个跨框架的通信工具，你可以用它来传递变量和方法。 benalman.com/projects/jquery-postmessage-plugin
@Jules 这不会对 jQuery 对话框做任何事情。
@Mooseman 如果 jQuery UI 正确实现（大多数情况下），它可以查看页面基础并将其用作显示对话框的参考窗口。我自己不会费心尝试这个，但我真的认为值得一试
@Jules：这没有任何作用。

标签： javascript jquery jquery-ui iframe jquery-dialog

【解决方案1】：

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

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

【讨论】：

跨域失败，Error: Permission denied to access property 'nodeType' in jquery.min.js.
正确。我补充说它们在我的问题中是同一个域。我不确定可以跨域工作的解决方案。
谢谢@Colin，我已经发布了new question on that。

【解决方案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 的边缘。添加了警报消息以显示窗口宽度和对话框位置。

【讨论】：

嗯。我认为这只是重做 jquery ui 已经做的事情。但它确实让我找到了正确的答案。
我的回答让您比position: {my: "center", at: "center", of: window.top} 做得更多。使用适合您的。
不过，您的也仍将位于 iframe 的中心。它实际上并没有回答这个问题。