3

我在页面中有一个 iFrame，我希望 Jquery 对话框以父级而不是 iFrame 为中心。

虽然我找不到办法做到这一点......

这在我单独运行 iFrame 页面时有效：

var LLopt = {
     position: {my: "center center", at: "center center", of: parent.top}
}; 
$("#locationdisplaybox").dialog(LLopt).dialog("open");

...但是当我尝试在父级内部运行它时，我在控制台中没有收到错误，但它没有运行（好像有一个看不见的错误）。

我相信这是因为从 iFrame 访问父级的安全限制。

如果我在没有“of:window.parent.top”的情况下运行上述内容，如果工作正常，但我在 iFrame 页面中的位置越低，对话框出现的越低（不居中）。

有谁知道我怎样才能把这个居中？

要查看实际存在的问题，请参阅此处，然后单击一些“查看场地详细信息”链接。

4

3 回答 3

1

同源政策将阻止您做任何事情。我假设您是 whygo.com 的开发人员，而 videoconferencingbookingsystem.com 属于其他人。在这种情况下，您需要让他们在他们的页面中嵌入一些 Javascript，就像 Google Analytics 所做的那样：https ://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

否则，您将无法从父母那里得到任何东西。iframe 的内容从父级访问任何内容是一个安全问题，因为您基本上可以代替父级的用户进行操作。

于 2013-08-12T11:42:17.327 回答
1

我相信这是因为从 iFrame 访问父级的安全限制。

如果页面不是来自同一来源，则您无法从典型的 iframe 中访问有关父级的任何内容。这是同源的一个很好的解释。

如果您的主页和 iframe 具有相同的来源，那么您可以很容易地从 iframe 访问父级。尝试从 iframe 中将这些值输出到控制台，看看你得到了什么：

console.log(window.document);     // will give you the document of the iframe
console.log(document);            // same as window.docuent

console.log(parent.document);     // will give you the main/parent document! 
                                  // parent refers to the parent of the current frame
console.log(top.document);        // same as above (if you only have one level of frames)
                                  // top refers to the outermost frame

console.log(window.frameElement); // will give you the frame element itself

所以，使用 jQuery，如果你想要的元素是 iframe 的直接父元素，你可以使用...

 var $iframeParent = $(window.frameElement).parent();

或者，如果您想要顶部或父窗口中的某个元素，并且您知道该元素的选择器是什么...

var $myElement = $(parent.document).find(someselector);
// or
var $myElement = $(top.document).find(someselector);

其他一些选择：

  • 如果您将 iframe 宽度设为父级的 100%，那么您可能会得到您正在寻找的效果。
  • 试用iframe 的无缝属性。

FWIW - 我认为你所拥有的看起来不错！

于 2013-08-06T21:19:01.410 回答
0

如果你能得到高度和宽度，试试这个：

var dlgWidth = 750;
var dlgHeight = 300;

var dlgX = (window.innerWidth - dlgWidth)/2;
var dlgY = (window.innerHeight - dlgHeight)/2;

var LLopt = {position: [dlgX,dlgY], width: dlgWidth, height: dlgHeight};

$("#locationdisplaybox").dialog(LLopt, dlgWidth);

您可以查看此链接以获取完整的 Dialog 定义和方法

http://api.jqueryui.com/dialog/

字符串：表示视口内位置的字符串。可能的值：“center”、“left”、“right”、“top”、“bottom”。

数组：一个数组，其中包含一个 x、y 坐标对，以距视口左上角的像素偏移量或可能的字符串值的名称为单位。

于 2013-08-05T19:43:29.097 回答